Why isn't my Parent component picking up the emitted event from a Child component when the Chil-CodePudding

I have two components; ParentComponent and ChildComponent. ChildComponent has an EventEmitter on it, called notifyParent (again, for the sake of argument). ParentComponent is listening for notifyParent and when ChildComponent emits the event, ParentComponent detects the emission and performs an action, as it should.

However, when I put the event emission inside the success callback of an rxjs observable, the event is never detected by ParentComponent. Why not?

I've validated that the EventEmitter pattern is working by being able to detect the event on ParentComponent when emitted from ChildComponent outside the observable. I'm able to reference another function on ChildComponent via this.functionName, eliminating the possibility of an invalid reference to "this" (which doesn't come up in Angular 2 , but I was grasping at straws).

I am using EventEmitters in other places in the application, including in other subscriptions, but never in a success callback of an Observable subscription (the other subscriptions are Subjects).

I tried to create a small repro project and it worked. My project is rather large with lots of modules so it's possible there's something in the project configuration that's causing an issue, but I'm not even sure what to look for. For what it's worth, this is what the Parent/Child components look like, even though if you copy this exact code it will more than likely work just fine.

@Component({
  selector: 'app-child',
  template: '<button type="button" (click)="clicked()">Click Me!</button><button type="button" (click)="clickedWithoutObservable()">Click Me Next!</button><button type="button" (click)="localClick()">Then Me!</button>'
})
export class ChildComponent {
  @Output notifyParent: EventEmitter<string> = new EventEmitter();

  constructor(private dataService: DataService) {}

  public clicked(): void {
    // this doesn't work
    this.dataService.update().subscribe(
      () => this.notifyParent.emit('Item updated!'),
      () => {}
    )
  }

  public clickedWithoutObservable(): void {
    // this works
    this.notifyParent.emit('Nothing happened');
  }

  public localClick(): void {
    // this works (but it doesn't emit, obviously)
    this.dataService.update().subscribe(
      () => this.logIt('Item updated!'),
      () => {}
    );
  }

  private logIt(message: string): void {
    console.log(message);
  }
}

@Component({
  selector: 'app-parent',
  templateUrl: '<app-child (notifyParent)="log($event)"></app-child>'
})
export class ParentComponent {
  public log(message: string): void {
    console.log(message);
  }
}

CodePudding user response：

Since your main project contains a lot of modules. It would be wise to investigate the possibility that your service is instantiated in two different places. For example if your service is "duplicated" between two lazyloaded modules