angular – 从ngOnInit调度操作时ExpressionChangedAfterItHasBe

发布时间：2020-12-17 16:59:43 所属栏目：安全来源：网络整理

导读：我正在我的AppComponent的构造函数中订阅ngrx store： export class AppComponent { submenuItems: ObservableArrayINavigationBarItem; constructor(private store: StoreAppState) { this.submenuItems = this.store.selectArrayINavigationBarItem((state

我正在我的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);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!