angular - 从 ngOnInit 调度操作时出现 ExpressionChangedAfterItHasBeenCheckedError

Question

我在 AppComponent 的构造函数中订阅 ngrx 存储:

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 方法中分派(dispatch)一个操作，如下所示:

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 异常。如果我将 dispatch 调用移动到我的子组件的构造函数，则不会引发任何错误，但我想知道这是否只是偶然。此外，我认为将其放入构造函数体内不是一个好主意。

我的每个组件都需要调用此 store.dispatch - 如您所见，它的目的是生成一个子菜单数据，该数据因页面而异。如何解决这个异常？

Answer 1

我遇到过几次这个问题，并认为这可能是 Angular 区域管理的问题。我所做的更像是黑客攻击，但也许它也能解决您的问题:

ngOnInit(): void {
    setTimeout(() => this.store.dispatch(new SubmenuAction([
        { title: 'Search', isActive: true },
        { title: 'New Group' }
    ])), 0);
}