Angular 2 Child1-parent-child2 Event Propagating
Solution 1:
I think you've got a couple of options here.
The first child component could emit the event using the @Ouput
decorator, and
have that event handler invoke an action on the sibling.
E.g. the sibling components
exportclassTableComponent {
@Output() anEvent: EventEmitter<any> = newEventEmitter<any>();
..
}
exportclassFilterComponent {
callMeWhenSomethingHappens($event){
..
}
}
The parent component template, which uses the #theFilter
local variable to call the filter component when the event is emitted.
<app-filter #theFilter>
</app-filter>
<app-table (anEvent)="theFilter.callMeWhenSomethingHappens($event)">
</app-table>
You could also look at using a shared service if the sibling components don't have access to each other in the template (e.g. if they are created by a router-outlet
).
Solution 2:
You can use the Flux pattern. Basically have your components subscribe to events exposed from your service. Since services are singletons, you can share the data that it provides across components, no matter how deep they are in the component tree. Here is an example: How can I maintain the state of dialog box with progress all over my Angular 2 application?
Post a Comment for "Angular 2 Child1-parent-child2 Event Propagating"