如何处理同一主题的多个订阅？

Question

我有以下场景：我有子组件，组件 A 和组件 B，它们从外部服务监听同一个主题，如下所示：

this.externalService.outcome.subscribe((event)=>{
  event.preventDefault();
  if(event.id === "SAVE"){
    // Do something individudal...
    this.externalService.save();
  }
})

基本上我是截取输出Subject，针对当前组件做一些特定的事情，然后手动触发保存动作。

现在在多个组件中包含这段代码可能会变得混乱并导致错误。我的所有组件都需要此订阅，因为它们每个都做一些单独的事情。

如何重构它，以便父组件/共享服务类管理所有订阅？因此，例如在子组件中，我只需定义一个方法应该做什么，然后我在父组件/共享服务中订阅 externalService.outcome 并基本上执行所有注册的功能？

编辑：问题是我还需要当前子组件的上下文。

EDIT2：总结起来应该是这样的顺序：

外部服务（库）调用 result.next() --> 我的 Parent 组件监听了 Subject 截获的结果：

this.externalService.outcome.subscribe((event)=>{
  event.preventDefault();
  if(event.id === "SAVE"){
    //SOMEHOW ENSURE ALL CHILD COMPONENTS ARE TRIGGERED
  }
 //manually trigger save outcome
 this.externalService.save();
 });

--> 在订阅中，我需要以某种方式触发我的子组件。例如，每个子组件都有一个方法“domeSomethingBeforeSave()”。但是我不知道我的子组件，所以我需要定义某种 registerfunction 来告诉我的父组件，应该调用哪些函数。

Answer 1

调查问题的解决方案之一可能是：

1. 在父组件订阅并在所有子组件中创建输入属性以传递数据。
2. 然后在每个子组件的 ngOnChanges 事件上执行您想要的操作。

Answer 2

您可以创建一个共享的父服务来注入父组件和子组件以使事情发生

// sharedService with external service injected
// you can take interceptor function as an param 
this.onSave=(interceptor)=>this.externalService.outcome.pipe(filter(event=>event.id === "SAVE"),
map(res=>interceptor(res))
)

在您的父组件或子组件中，您始终可以连接到这些 observable 来做任何您想做的事情

// pass in interceptor
this.sharedService.onSave(doSomethingBeforeSave).subscribe()