为什么 EventEmitter 不返回第一个值？

Question

我有一个 eventemitter 问题，即当我在子类中添加数据并通过 EventEmitter 将数据传递给父类时，我面临一个问题，即当子类添加时父类无法获取第一个数据，第一个数据是在子项中添加第二个数据时，子项仅添加到父项

子组件

    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 值的代码移动到 subscribe 块内。

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 => {...});
}