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>

如果兄弟组件在模板中无法相互访问（例如，如果它们是由router-outlet创建的话），您还可以查看使用shared service。

Answer 2

您可以使用Flux模式。基本上，您的组件订阅了从您的服务公开的事件。由于服务是单例，因此无论组件树中的数据有多深，您都可以共享它跨组件提供的数据。以下是一个示例：How can I maintain the state of dialog box with progress all over my Angular 2 application?