Angular 2 - 如何调用同级组件中的函数？

Question

我有 2 个兄弟组件需要通信:

<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>