Angular 2 Child1-Parent-Child2 событие, распространяющееся

Question

Я работаю над Angular 2 всего пару недель, поэтому старайтесь быть внимательным, пожалуйста, и, возможно, дать мне полезный совет? Спасибо. У меня есть основной компонент (pageComponent), который внутри его шаблона имеет два других меньших компонента (tableComponent и filterComponent), каждый со своими собственными функциями и свойствами. Как поймать событие, созданное в одном из дочерних компонентов, и передать его другому дочернему компоненту одного и того же родителя? Другими словами, как распространять и передавать события между двумя дочерними компонентами в одном шаблоне одного и того же родительского компонента?

Answer 1

Я думаю, у вас здесь пара вариантов.

Первый дочерний компонент может излучать событие, используя декоратор @Ouput, и имеют этот обработчик событий, который вызывает действие для родного брата.

E.g. компоненты одноуровневых

export class TableComponent { 
@Output() anEvent: EventEmitter<any> = new EventEmitter<any>(); 
.. 
} 

export class FilterComponent { 

    callMeWhenSomethingHappens($event){ 
    .. 
    } 
} 

Шаблон компонент родителя, который использует локальную переменную #theFilter вызвать компонент фильтра, когда событие генерируется.

<app-filter #theFilter> 
</app-filter> 

<app-table (anEvent)="theFilter.callMeWhenSomethingHappens($event)"> 
</app-table> 

Вы также можете посмотреть на использовании shared service если компоненты одноуровневых не имеют доступа друг к другу в шаблоне (например, если они созданы с помощью router-outlet).

Answer 2

Вы можете использовать шаблон Flux. В основном, ваши компоненты подписываются на события, выставленные с вашего сервиса. Поскольку сервисы являются одноточечными, вы можете делиться данными, которые он предоставляет через компоненты, независимо от того, насколько они глубоки в дереве компонентов. Вот пример: How can I maintain the state of dialog box with progress all over my Angular 2 application?