почему EventEmitter не возвращает первое значение?

Question

У меня проблема с eventemitter, то есть когда я добавляю данные в дочерний класс и передаю данные в родительский с помощью EventEmitter, я сталкиваюсь с проблемой, что родитель не может получить первые данные при добавлении дочерних, первые данные были child добавляется только к родителю, когда вторые данные добавляются в child

дочерние компоненты

    saveData()
        {
         this.dialog.closeAll();
          this.getData();
           const body={
                name:this.model.name,
               age:this.model.age
                 }
          // this.arrayCalendar.push(body);
         this.calendarService.previewdata.emit(body)
               }

родительский компонент

      handleDateClick(arg) {

const data={};
this.dialog.open(AddPatientComponent,{
  data:{data},
  width:"200px",
  height:"300px"

})
 this.calendarService.previewdata.subscribe(message => this.result = message);
console.log("DATA FROM PARENT"+JSON.stringify(this.result))
if(this.result)
{
    this.calendarEvents = this.calendarEvents.concat({ 

    title: this.result.name,
    start: arg.date,
    allDay: arg.allDay
  })
}

}

обслуживание

      constructor() { }
      public previewdata = new EventEmitter();

Кто-нибудь знает причину этого?

Answer 1

Вы должны переместить код, который зависит от значения EventEmitter, внутри блока подписки.

this.calendarService.previewdata.subscribe(message => this.result = message);
console.log("DATA FROM PARENT"+JSON.stringify(this.result))
if(this.result)
{
    this.calendarEvents = this.calendarEvents.concat({ 
    title: this.result.name,
    start: arg.date,
    allDay: arg.allDay
  })
}

должно быть

this.calendarService.previewdata.subscribe(message => {
 this.result = message;
 console.log("DATA FROM PARENT"+JSON.stringify(this.result))
    if(this.result)
    {
        this.calendarEvents = this.calendarEvents.concat({ 
        title: this.result.name,
        start: arg.date,
        allDay: arg.allDay
      })
    }
});

Answer 2

Честно говоря, я бы предложил серьезный рефакторинг. Если вы хотите использовать emitter, используйте его без сервиса, это странный дизайн.

Во-вторых, не подписывайтесь на функцию, которая обрабатывает щелчок. Это может привести к странному поведению, например, к тому, что вы испытываете сейчас, если вы не отмените подписку должным образом.

Если вы хотите использовать сервис, удалите emitter и замените его каким-нибудь предметом и заметным.

Служба:

private _previewData: Subject<any> = new Subject<any>(); //use proper type instead of any
previewData$: Observable<any> = this._previewData.asObservable(); //same here

constructor() {}

// and correct type here instead of any
pushUpdate(dialogData: any): void {
  this._previewData.next(dialogData);
}

Ребенок:

saveData(): void {
  // I'm not sure what dialog you use but I have a feeling that the code below
  // should be moved to subscribe or then
  this.dialog.closeAll();
  this.getData();

  const body = {
    name:this.model.name,
    age:this.model.age
  }

  this.calendarService.pushUpdate(body);
}

Родитель:

ngOnInit() {
  this.calendarService.previewData$
    .pipe(
      // Add console log to see what data are pushed
      tap(data => console.log('previewData:', data)),
      // Remove if it fails for no obvious reason and do the check in subscribe
      filter(data => !!data)
    )
    .subscribe(message => {
      // Do whatever you want to do with your data here
      this.result = message

      if (this.result) {
        this.calendarEvents = this.calendarEvents.concat({ 
          title: this.result.name,
          start: arg.date,
          allDay: arg.allDay
       });
    });
}

handleDateClick(arg) {
  const data={};
  this.dialog.open(AddPatientComponent, {
    data:{data},
    width:"200px",
    height:"300px"
  });
  // It looks like you are using Angular Material, have you tried 
  // handling data returned from dialog in aferClosed() observable?
  // dialog.afterClosed().subscribe(result => {...});
}