0

Currently I am working on a project where I need a table component which can be implemented as ChildComponent in multiple ParentComponents. The ParentComponents can provide data with different services.

Example given: For ComponentA the table shows data from ServiceA and for ComponentB the table shows data from ServiceB.

To do that my TableComponent has a @Input() variable called dataService:

_dataSubscription: Subscription;    
@Input() dataService: DataService; 
// DataService is an abstract class. ServiceA and ServiceB are implenting this class.

In ngOnInit() I am subscribing to dataService:

this._dataSubscription = this.dataService.getData().subscribe(
    (response) => {
      console.log(response)
    }
  );

Furthermore I am unsubscribing to dataService whenever the user switches between the ParentComponents:

  ngOnDestroy(): void {
     this._dataSubscription.unsubscribe()
  }

In ParentComponentA the first service gets injected like that:

constructor(public serviceA: ServiceA){}

And it is passed to the table in .html with:

<app-table [dataService]="serviceA" #table></app-table>

(I do the same for ParentComponentB but instead of using "serviceA: ServiceA" I am using : "serviceB: ServiceB")

I know that its not looking that good but it works pretty well. The only problem is that whenever the user switches from ParentComponentA to ParentComponentB both .getData() methods are called and console.log prints both respone. This could be a problem when the data size is getting bigger and bigger. Is there anyway how to solve this problem?

I thought that unsubscribing in ngOnDestroy is working, but it had no effect - Still console.log prints the results of both calls

Thanks in advance

Celebrombore
  • 170
  • 11
  • `getData()` would be called as soon as the components are initialized. When you say you are switching from `ParentA` to `ParentB`. Both are initialized. Are you expecting your component switch to be faster than the service call? If so, your `onDestroy` should do the job. – Ashish Ranjan Dec 16 '21 at 15:26
  • Why don't you just hand over the data to the table component. In that case you wouldn't have this issue – Batajus Dec 16 '21 at 15:31
  • With switching from ParentA to ParentB I meant that I have two routes - One is '/parentA' and the other one '/parentB'. The user can navigate to another route via a menu on the left side which is always displayed. I have added a console.log in ngOnDestroy. It is always displayed before the result of the getData() call of the other component - So I assume that the unsubscribe is fast enough to handle it , am I right? – Celebrombore Dec 16 '21 at 15:35
  • @Batajus hmhm well, yes u are right, that would make everything much easier - I don't know why I didn't think of that. – Celebrombore Dec 16 '21 at 15:38

1 Answers1

0

Why you are passing the service to the child ?

You can simply inject the service to the child too by passing it in constructor

In ChildComponent do :

constructor(private serviceA: ServiceA){}

Note: You can inject a single service to multiple components

Aimad Harilla
  • 21
  • 3
  • Yeah, I could do it like that. The problem with that approach is that this TableComponent should be able to show the data for all the services in the project (20+) - So I would have to inject each service manually to the table constructor and that is really hard work. This was my first approach and I am looking for a better way to archieve this – Celebrombore Dec 16 '21 at 15:54