javascript - Angular 2 Child1-Parent-Child2 事件传播

Question

我在 Angular 2 上工作的时间只有几周，所以请尽量体谅一下，也许能给我一些有用的建议？谢谢。我有一个主要组件(pageComponent)，它的模板内有其他两个较小的组件(tableComponent 和 filterComponent)，每个组件都有自己的功能和属性。如何捕获在一个子组件中创建的事件并将其传播到同一父组件的另一个子组件？换句话说，如何在同一父组件模板中的两个兄弟组件之间传播和通信事件？

Answer 1

我认为您有几个选择。

第一个子组件可以使用 @Ouput 装饰器发出事件，并且 让该事件处理程序调用同级上的操作。

例如兄弟组件

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 创建的)。