Question

我有以下情况：我有子组件Component A和Component B，它们从外部服务监听相同的Subject，就像这样：

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

基本上，我正在截取结果Subject，对当前组件执行特定的操作，然后手动触发save操作。

现在将这段代码包含在多个组件中可能会变得混乱，并可能导致错误。我需要在所有组件中进行此订阅，因为它们每个都单独执行某项操作。

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

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

EDIT2：总结起来，应该是以下顺序：

外部服务（库）调用result.next（） ->侦听主题Subject的结果的My Parent组件：

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（）”。但是我不知道我的子组件，所以我需要定义某种寄存器函数来告诉父组件，应该调用哪个函数。

Answer 1

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

订阅父组件，并在所有子组件中创建input属性以传递数据。
然后在每个子组件的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))
)

在您的父级或子级组件中，您始终可以挂接这些可观察到的内容，以执行您想要的任何事情

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

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

2 个答案: