我有一个子Calendar Component,它通过输入字段从父亲那里接收事件.
@Input() private events: any[];
Run Code Online (Sandbox Code Playgroud)
当月份更改时,父级将从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);
});
Run Code Online (Sandbox Code Playgroud)
}
但是当孩子试图访问他们尚未更新的事件时!
我的解决方法是将子函数包装在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);
Run Code Online (Sandbox Code Playgroud)
}
有没有更好的方法呢?也许我应该实施一个Angular最佳实践?
谢谢!