0

I cannot understand why the data set by parent component is not obtained on the child component by the following approach. I have used this approach many times, but I have really no idea what the problem:

parent component:

setData() {
    this.dataService.setDataSubject('test');
}

data.service:

private dataSubject = new BehaviorSubject<any>(undefined);

getDataSubject(): BehaviorSubject<any> {
  return this.dataSubject;
}

setDataSubject(param: any) {
  this.dataSubject.next(param);
}

child component:

testData: any;


constructor(
    private dataService: DataService
) { }

ngOnInit() {
  this.dataService.getDataSubject().subscribe(data => {
    // <-- it is not triggered after parent's setData() method 
    // is called (except first page load)
    debugger; 
    if (data) {
      this.testData = data;
    }
  });
}

I also tried something using something like public data$: Observable<any> = this.dataSubject; using Observable.

Update:

Here is my module relationship:

parent.module:

imports: [
  SharedModule
],
providers: []

child.module:

imports: [
  SharedModule
],
providers: []

shared.module:

providers: [
    DataService
]

When I update as shown above, it still does not work. However, if I move DataService in the providers field from shared.module to app.module it works. But I think it should work when it is only in shared.module as shown above. Why?

  • Are you sure both components are using the same `DataService` instance? – martin Feb 10 '21 at 10:50
  • `dataService.setData` is undefined? Or am I missing something? – Jeremy Thille Feb 10 '21 at 10:51
  • @JeremyThille Sorry, it is actually `this.dataService.setDataSubject('test')` and there is no problem in the project. I also corrected it on the question. –  Feb 10 '21 at 10:52
  • Then two possibilities I think, either you call `setData()` before the child component has subscribed to it, or as @martin said, make sure you are using the same instance of the service in both components – Jeremy Thille Feb 10 '21 at 10:55
  • @JeremyThille I checked, but first child component subscribes and then I trigger the `setData` method. I do not understand what do you mean with "using the same instance of the service in both components ". I inject the service instance on the constructor of them. Any mistake with this? –  Feb 10 '21 at 11:02
  • If I remember correctly, I had issues with this at some point. It turned out that I was injecting my service, but Angular was creating a different instance of the service each time. Problem solved by adding `@Injectable({ providedIn: 'root' })` in the service, so it became a singleton – Jeremy Thille Feb 10 '21 at 12:14
  • Thanks, but already use `@Injectable({ providedIn: 'root' })` in my service. Any idea? –  Feb 10 '21 at 12:34
  • Might it be that your child component is lazy-loaded? If so, check this up: https://stackoverflow.com/questions/41290275/angular2-lazy-loading-service-being-instantiated-twice – desertech Feb 11 '21 at 12:49
  • Not child, but parent component is lazy loaded. –  Feb 11 '21 at 14:44

0 Answers0