Question

我正在ngrx的构造函数中订阅AppComponent商店：

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

我的每个组件都需要进行store.dispatch调用 - 正如您所看到的，其目的是生成子页面数据，这些数据在页面之间会有所不同。如何解决这个异常？

Answer 1

将分派调用从ngOnInit移动到构造函数对我来说很有效。

export class SearchPageComponent implements OnInit {
constructor(private store: Store<AppState>) { 
 this.store.dispatch(new SubmenuAction([
        { title: 'Search', isActive: true },
        { title: 'New Group' }
    ]));
}

    ngOnInit(): void { }
}

Answer 2

我几次遇到此问题，并认为这对Angular区域管理是一个问题。我所做的更像是骇客，但也许也可以解决您的问题：

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

从ngOnInit调度操作时ExpressionChangedAfterItHasBeenCheckedError

2 个答案: