使用 Angular6,假设我有 2 个子组件 A、B,它们都是父组件 P 的一部分。
我想在组件 A 上使用表单输入 - 所以一旦点击,字符串值将通过 并触发功能 在组件 B 上。
可能是这样的:
functionOnB(valueFromA: string) { //some code here; }
这甚至可能吗?
我已经使用 angular 的 EventEmitter 在组件之间成功传输了数据,但是是否可以使用这些数据调用函数,而不仅仅是传递原始信息?
最佳答案
公共(public)服务可用于从另一个组件触发事件/功能。例如:ComponentA 的点击事件会调用一个服务方法。然后,该服务方法应该发出另一个事件。然后 ComponentB 应该订阅服务的事件发射器。示例代码:
ChildA (HTML):
<button (click)="onClick()"></button>
ChildA Controller (TS):
onClick() {
this.commonService.AClicked('Component A is clicked!!');
}
公共(public)服务 (TS):
import { Injectable, EventEmitter, Output } from '@angular/core';
@Output() aClickedEvent = new EventEmitter<string>();
AClicked(msg: string) {
this.aClickedEvent.emit(msg);
}
ChildB Controller (TS):
ngOnInit() {
this.commonService.aClickedEvent
.subscribe((data:string) => {
console.log('Event message from Component A: ' + data);
});
}
关于Angular:在一个组件中调用一个函数,在另一个组件上调用事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52413873/