Angular 2 - 如何在兄弟组件中调用函数？

Question

我有两个需要沟通的兄弟组件：

<app-controls></app-controls> <app-main></app-main>

app-controls包含需要在app-main组件中触发事件的按钮。是否有符合Angular 2风格指南的方式？

Answer 1

您可以使用模板变量来获取对兄弟的引用。 如果<app-controls>的输出在单击按钮时发出事件，则可以执行以下操作：

<app-controls (buttonClicked)="main.doSomething($event)"></app-controls>
<app-main #main></app-main>

或者您可以将引用传递给@Input() siblings;，然后在其上调用方法：

<app-controls [sibling]="main"></app-controls>
<app-main #main></app-main>

Answer 2

两种方式：

使用带依赖注入的共享服务。

或使用@Input()和@Output()装饰器：

https://angular.io/docs/ts/latest/cookbook/component-communication.html