当前组件中发生事件时，在兄弟组件中调用函数

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，就会执行post组件中的监听器。你需要确保两个组件共享相同的CommonService实例，即status和post组件都是同一个NgModule的一部分，如果它们不是你需要使用共享模块与CommonService创建forRoot的单例。