当前组件中发生事件时调用同级组件中的函数

Question

我的应用程序有一个父组件和两个兄弟组件。

<feed>
 <status></status>
 <post></post>
</feed>

我想要实现的是，当我在基本上是文本字段的状态组件中写一些东西并提交时，我应该将该数据传递给 post 组件并调用 post 组件中的另一个函数来更新它的视图。但我不知道如何实现这一点。任何帮助将不胜感激。

Answer 1

您需要实现一个服务并拥有一个事件发射器，您可以将该服务注入两个组件并从status组件发出并在post组件中侦听它

common.service.ts :

@Output() public somethingChanged: EventEmitter<any> = new EventEmitter();

status.component.ts ：

someFunc() {
    this.commonService.somethingChanged.emit({
        data: "Dummy Data For Post Component"
    })
}

post.component.ts ：

constructor(
    public commonService: CommonService
) {
    this.commonService.somethingChanged.subscribe((data: any) => {
        console.log("Data from status component", data);
    })
}

现在，无论何时someFunc调用 in status 组件，都会执行 post 组件中的侦听器。您需要确保两个组件共享相同的实例，CommonService即两者status和post组件都是 same 的一部分NgModule，如果它们不是，则您需要创建CommonService使用共享模块与forRoot.