In my app I have RootLayout component that is responsible for rendering the app's routes, here's the code of that component's template:
<div class="full-size inner container">
<app-topbar
[isSidebarActive]="showSidebar"
(onSidebarToggle)="toggleSidebar()">
</app-topbar>
<app-sidebar
*ngIf="!updatingState"
[ngClass]="{ 'is-active': showSidebar }">
</app-sidebar>
<div class="ng-outlet inner container" *ngIf="!updatingState">
<router-outlet></router-outlet>
</div>
</div>
It also listens for changes when the user logs in or logs out, and in order to update the current page (which is being rendered by the <router-outlet>) to reflect the new user state, I basically had to bind the <router-outlet> component to a variable that will change whenever the user state changes, that way the RootLayout component and it's child components gets updated, heres the code for that:
ngOnInit() {
this.userStateSubscription = this.user.updatingUserState$
.subscribe((isLoading) => {
this.updatingState = isLoading;
this.cdr.detectChanges();
});
}
With that, the currently rendered route does initially update to reflect the new user state, but the problem is that after the this.cdr.detectChanges() call in the RootLayout component, the page that is currently being rendered by <router-outlet> simply stops checking for any further changes in the component, any events or changes that happen in the current page or any of its child components do not trigger any updates after detectChanges() is called.
However, when I trigger a change in the <app-topbar> component, (if I toggle the sidebar for example), this will trigger change detection in the entire application, including the currently rendered route, but that's all, only changes made to the RootLayout and it's direct children will trigger further updates.
And I cannot simply reload the page since I'm building an Electron.js app, so that wouldn't work very well. Perhaps there is a better way to make the page update when the user logs in or logs out? Or can I somehow "re-enable" change detection for the component being rendered by <router-outlet>?
