我为我的应用程序中的所有请求创建了一个组件加载和一个拦截器，加载会出现在屏幕上，直到请求完成为止。然而，每当路由器出口的组件发生变化时，我就会得到一个错误。你能帮帮我吗？

我的错误：

错误错误：ExpressionChangedAfterithasBeenCheckedError：表达式在检查后已更改。前一个值：“未定义”。当前值：“true”。似乎视图是在父视图和子视图进行了脏检查之后创建的。它是在变更检测挂钩中创建的吗？

我的代码：

export class MasterPageComponent implements OnInit {

  constructor(private el: ElementService, private loader: LoaderService) { }

  ngOnInit(): void {}

  isLoading: Subject<boolean> = this.loader.isLoading;
}

master-page.component.html

<div class="wrapper default-theme" [ngClass]="getClasses()">
  <app-navbar></app-navbar>
  <main>
    <app-sidebar></app-sidebar>
    <div class="pages container-fluid pt-4 pb-4 pl-4 pr-4 ">
      <router-outlet></router-outlet>
    </div>
    <div class="overlay" (click)="toggleSidebar()"></div>
  </main>
</div>
<app-loading *ngIf="isLoading | async"></app-loading>

我的LoaderService：

export class LoaderService {
    isLoading = new Subject<boolean>();
    show() {
        this.isLoading.next(true);
    }
    hide() {
        this.isLoading.next(false);
    }
}

我的加载程序拦截器：

export class LoaderInterceptor implements HttpInterceptor  {

  constructor(private loader: LoaderService) {

  }

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    this.loader.show()
    return next.handle(req).pipe(
      finalize(() => this.loader.hide())
    );

  }
}