How to handle multiple subscriptions on the same subject? - html

Question

I have following scenario: I have child components, Component A and Component B, who listen on the same Subject from an external service, like this:
this.externalService.outcome.subscribe((event)=>{
event.preventDefault();
if(event.id === "SAVE"){
// Do something individudal...
this.externalService.save();
}
})
Basically I am intercepting the outcome Subject, do something specific for the current component and then manually trigger the save action.
Now having this piece of code in multiple components can get messy and can lead to errors. I need this subscription in all of my components, because each of them does something individual.
How can I refactor this, so that a parent component/ a shared service class manages all the subscriptions? So for example in the child components I just define a method what should be done and then I subscribe to the externalService.outcome in my parent component/ shared service and basically execute all registered functions?
EDIT: The thing is I also need the context of the current child component.
EDIT2: To sum it up this should be the sequence:
External Service (Library) calls outcome.next()
--> My Parent component who listens to the outcome Subject intercepts:
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();
});
--> Inside the subscription I somehow need to trigger my child components. For example every childcomponent has a method "domeSomethingBeforeSave()". But I don't know my childcomponents so I need to define some kind of registerfunction to tell my parent component, which functions should get called.

Answer 1

Looking into the problem one of the solution could be:
Subscribe at the parent component and create input property in all of the child component for passing the data.
Then on ngOnChanges event of each child component do the stuffs you want to.

Answer 2

You can create a shared parent service to inject into both parent and child component for things to happen
// 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))
)
In your parent or child component you can always hook up to these observable to do what ever you want
// pass in interceptor
this.sharedService.onSave(doSomethingBeforeSave).subscribe()