我正在我的AppComponent的构造函数中订阅ngrx store：
export class AppComponent {
submenuItems: Observable<Array<INavigationBarItem>>;
constructor(private store: Store<AppState>) {
this.submenuItems = this.store.select<Array<INavigationBarItem>>((state: AppState) => state.submenu.items);
}
}
然后,我在我的其他组件的ngOnInit方法中调度一个动作,如下所示：
export class SearchPageComponent implements OnInit {
constructor(private store: Store<AppState>) { }
ngOnInit(): void {
this.store.dispatch(new SubmenuAction([
{ title: 'Search',isActive: true },{ title: 'New Group' }
]));
}
}
此交互的结果是ExpressionChangedAfterItHasBeenCheckedError异常.如果我将调度调用移动到我的子组件的构造函数,那么不会抛出任何错误,但我想知道这是否只是偶然的.另外我不认为把它放在构造函数体内是一个好主意.
我的每个组件都需要有这个store.dispatch调用 – 正如您所看到的,其目的是生成一个子页面数据,该页面数据将不同于页面.如何解决这个异常？
解决方法
我几次遇到这个问题,并认为这将是Angular区域管理的一个问题.我所做的更像是一个黑客,但也许它也解决了你的问题：
ngOnInit(): void {
setTimeout(() => this.store.dispatch(new SubmenuAction([
{ title: 'Search',{ title: 'New Group' }
])),0);
}
