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

Question

我有需要进行通信2个同级组件：

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

应用程式控制包含需要触发在app-主要成分的事件的按钮。是否有符合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() UND @Output()装饰：

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