7

我订阅ngrx存储在 my 的构造函数中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调用 - 如您所见，其目的是生成一个子菜单数据，该数据将因页面而异。如何解决这个异常？

4

2 回答 2

2

将调度调用从 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 { }
}
于 2019-04-26T11:07:23.797 回答
1

我遇到过几次这个问题，并认为这将是 Angular 区域管理的问题。我所做的更像是一个黑客，但也许它也解决了你的问题：

ngOnInit(): void {
    setTimeout(() => this.store.dispatch(new SubmenuAction([
        { title: 'Search', isActive: true },
        { title: 'New Group' }
    ])), 0);
}
于 2018-09-07T08:36:56.310 回答