Angular

Question

我有一个 child 日历组件，它通过输入字段从他父亲那里接收事件。

@Input() private events: any[];

当月份更改时，parent 从 API 服务获取新事件并调用 child 组件来显示它们。

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);
});

}

但是当 child 尝试访问事件时，它们尚未更新！

我的解决方法是将 child 函数包装在 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 最佳实践？

谢谢！

Answer 1

暂无数据，因为这个函数是同步处理的：

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

设置 this.events 后，子组件运行立即成为其方法 selectEventDaysIfApplies()。即在 Angular 变化检测之前是运行.

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

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

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

如果您的组件有多个输入，您可以检查更改了哪一个。

在 docs 阅读更多相关信息。

Angular - 输入数据在 child 组件上不立即可用，为什么？

Angular - Input data not immediately available on child component, why?

javascript

typescript

angular2-changedetection