Angular detectChanges（）禁用子组件的更改检测

Question

在我的应用程序中，我有RootLayout组件负责呈现应用程序的路由，这是该组件模板的代码：

  <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>

它还会在用户登录或注销时监听更改，并且为了更新当前页面（由<router-outlet>呈现）以反映新用户状态，我基本上必须绑定变量的<router-outlet>组件将在用户状态发生变化时发生变化，这样RootLayout组件及其子组件的更新方式就会发生变化，代码为：

  ngOnInit() {
    this.userStateSubscription = this.user.updatingUserState$
      .subscribe((isLoading) => {
        this.updatingState = isLoading;
        this.cdr.detectChanges();
      });
  }

这样，当前呈现的路由最初会更新以反映新的用户状态，但问题是在RootLayout组件中this.cdr.detectChanges()调用之后，{{1}当前正在呈现的页面只需停止检查组件中的任何进一步更改，当前页面或其任何子组件中发生的任何事件或更改都不会在调用<router-outlet>后触发任何更新。

但是，当我触发detectChanges()组件的更改时（例如，如果我切换侧边栏），这将触发整个应用程序中的更改检测，包括当前呈现的路径，但仅此而已对<app-topbar>所做的更改及其直接子项将触发进一步的更新。

我不能简单地重新加载页面，因为我正在构建一个Electron.js应用程序，所以这不会很好。也许有更好的方法在用户登录或注销时更新页面？或者我可以以某种方式“重新启用”由RootLayout？

呈现的组件的更改检测