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

Question

我有两个需要交互的兄弟组件： app-controls包含需要在app-main组件中触发事件的按钮。是否有符合Angular 2风格指南的方法来实现这一点？

- wesley.ireland

Answer 1

您可以使用模板变量来获取兄弟元素的引用。 如果 <app-controls> 元素具有输出功能，在按钮被点击时它将触发事件，您可以这样做：

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

或者你可以传递一个引用到@Input() siblings;，然后对它调用方法：

Translated sentence:

或者你可以传递一个引用到@Input() siblings;，然后对它调用方法：

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

- Günter Zöchbauer

---

我正要发布一个答案，提到输出+本地模板变量技术，但你比我先发了：）。这是plunker。 - Mark Rajcok

感谢使用 Plunker :) - Günter Zöchbauer

@GünterZöchbauer，我如何访问<app-main #main></app-main>内部的表单？请注意，对于此#main，我正在加载动态组件。 - LittleDragon

@GünterZöchbauer 感谢您提供的解决方案。 - Ajay Patel

看起来你还可以创建一个ViewChild引用到组件A，然后将它赋值给组件B中的一个公共变量，这样就可以在组件B中引用了。我不得不这样做以避免ExpressionChangedAfterItHasBeenCheckedError错误，因为我在组件A上有一个*ngIf。 - Doug

Answer 2

两种方法：

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

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

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

- slaesh