使用 Angular6，假设我有 2 个子组件 A、B，它们都是父组件 P 的一部分。 我想在组件 A 上使用表单输入，因此一旦单击，字符串值将通过 并在组件 B 上触发函数。 可能是这样的：
functionOnB(valueFromA: string) { //some code here; }
这可能吗？
我已经使用 Angular 的 EventEmitter 在组件之间成功传输了数据，但是是否可以使用这些数据调用函数，而不仅仅是传递原始信息？
【问题讨论】：
标签： angular eventemitter angular-event-emitter
是的，有可能，您可以使用@Input 装饰器将组件引用传递给另一个组件。这样，您可以从 ComponentA 调用 ComponentB 方法。
例如在 FirstComponent 中声明一个 SecondComponent 类型的实例变量：
@Input()
second: SecondComponent;
然后在您的父 HTML 中传递组件引用：
<app-first [second]="second"></app-first>
<app-second #second></app-second>
Component Interaction Cookbook
这里有一个工作示例： Component Interaction Example
【讨论】：
一个通用服务可用于从另一个组件触发事件/功能。例如：ComponentA 的点击事件会调用一个服务方法。然后，该服务方法应该发出另一个事件。然后 ComponentB 应该订阅服务的事件发射器。示例代码： 孩子A（HTML）：
<button (click)="onClick()"></button>
ChildA 控制器 (TS)：
onClick() {
this.commonService.AClicked('Component A is clicked!!');
}
公共服务 (TS)：
import { Injectable, EventEmitter, Output } from '@angular/core';
@Output() aClickedEvent = new EventEmitter<string>();
AClicked(msg: string) {
this.aClickedEvent.emit(msg);
}
ChildB 控制器 (TS)：
ngOnInit() {
this.commonService.aClickedEvent
.subscribe((data:string) => {
console.log('Event message from Component A: ' + data);
});
}
【讨论】：