角度:在一个组件中调用函数，在另一个组件上调用事件

Question

使用 Angular6，假设我有 2 个子组件 A、B，它们都是父组件 P 的一部分。 我想在组件 A 上使用表单输入 - 所以一旦单击，字符串值将传递并触发组件 B 上的函数。 也许是这样的：

functionOnB(valueFromA: string) { //some code here; } 

这可能吗？

我已经使用 angular 的 EventEmitter 成功地在组件之间传输数据，但是是否可以使用此数据调用函数，而不仅仅是传递原始信息？

Answer 1

公共服务可用于从另一个组件触发事件/函数。例如：组件 A 的单击事件将调用服务方法。然后，该服务方法应发出另一个事件。然后，组件 B 应订阅服务的事件发射器。示例代码： ChildA (HTML(：

<button (click)="onClick()"></button>

子控制器 (TS(：

onClick() {
this.commonService.AClicked('Component A is clicked!!');
}

共同事务：

import { Injectable, EventEmitter, Output } from '@angular/core';
@Output() aClickedEvent = new EventEmitter<string>();
AClicked(msg: string) {
this.aClickedEvent.emit(msg);
}

子 B 控制器 (TS(：

ngOnInit() {
this.commonService.aClickedEvent
.subscribe((data:string) => {
console.log('Event message from Component A: ' + data);
});
}

Answer 2

是的，您可以使用@Input装饰器将组件引用传递给另一个组件。通过这种方式，您可以从组件 A 调用组件 B 方法。

例如，在 FirstComponent 中，您声明了一个 SecondComponent 类型的实例变量：

@Input()
second: SecondComponent;

在父 HTML 中，您传递组件引用：

<app-first [second]="second"></app-first>
<app-second #second></app-second>

组件交互手册

这里有一个工作示例： 组件交互示例