I have set up my AppComponent to subscribe to the ngrx store in its constructor:
export class AppComponent {
submenuItems: Observable<Array<INavigationBarItem>>;
constructor(private store: Store<AppState>) {
this.submenuItems = this.store.select<Array<INavigationBarItem>>((state: AppState) => state.submenu.items);
}
}
In another component, I am dispatching an action within the ngOnInit method like this:
export class SearchPageComponent implements OnInit {
constructor(private store: Store<AppState>) { }
ngOnInit(): void {
this.store.dispatch(new SubmenuAction([
{ title: 'Search', isActive: true },
{ title: 'New Group' }
]));
}
}
This results in the
ExpressionChangedAfterItHasBeenCheckedErrordispatch call to the constructor of the child component seems to prevent the error, but I'm unsure if this solution is reliable. Placing it inside the constructor body also doesn't seem ideal.
Every component will require a store.dispatch call for generating unique submenu data per page. What is the best way to handle this exception?