javascript – Angular – 输入数据不能立即在子组件上使用,为什么?

我有一个子Calendar Component,它通过输入字段从父亲那里接收事件.

@Input() private events: any[];

当月份更改时,父级将从API服务获取新事件,并调用子组件以显示它们.

private populateEventsForCurrentMonth() {
return this.calendarService.getEventsAsAdmin(this.getCurrentStartDate(), 
this.getCurrentEndDate())
.then((evts) => {
  this.events = evts;
  this.calendarChild.selectEventDaysIfApplies();
})
.catch((err) => {
  console.log('error getting events', err);
});

}

但是当孩子试图访问他们尚未更新的事件时!

我的解决方法是将子函数包装在0毫秒的超时中,以将整个执行放在事件循环的末尾.

public selectEventDaysIfApplies() {
setTimeout(() => {
  if (this.events) {
    this.events.forEach((event) => {
      let eventDate = new Date(event.starts_at);
      if (this.datesBelongToSameMonth(eventDate, this.currentDate)) {
        let dayWithEvent = this.days.find( (day) => {
          return day.number == eventDate.getDate();
        });
        if (!dayWithEvent.selected) {
          dayWithEvent.hasEvent = true;
        }
      }
    });
  }
}, 0);

}

有没有更好的方法呢?也许我应该实施一个Angular最佳实践?

谢谢!

最佳答案
数据尚不可用,因为此功能是同步处理的:

this.events = evts;
this.calendarChild.selectEventDaysIfApplies();

在设置this.events之后,子组件立即运行其方法selectEventDaysIfApplies().那是在运行角度变化检测之前.

在我看来,父组件不应该知道它的子组件必须做的任何检查和修改.

更好的解决方案是使用生命周期钩子OnChanges,只要组件的输入发生变化就会触发它.

ngOnChanges(changes: SimpleChanges) {
  this.selectEventDaysIfApplies();
}

如果您的组件有多个输入,则可以检查哪个输入已更改.

docs中了解更多相关信息.

转载注明原文:javascript – Angular – 输入数据不能立即在子组件上使用,为什么? - 代码日志