Angular 加載錯誤 ExpressionChangedAfterItHasBeenCheckedError

Question

我為我的應用程序中的所有請求創建了一個組件加載和一個攔截器，加載顯示在屏幕上，直到請求完成。 但是，每當我的路由器插座組件發生變化時，我都會收到錯誤消息。 你能幫助我嗎？

我的錯誤：

ERROR 錯誤：ExpressionChangedAfterItHasBeenCheckedError：表達式在檢查后已更改。 以前的值：'未定義'。 當前值：“真”。 似乎視圖是在對其父級及其子級進行臟檢查之后創建的。 它是在變更檢測掛鈎中創建的嗎？

我的代碼：

export class MasterPageComponent implements OnInit {

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

  ngOnInit(): void {}

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

母版頁.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>

我的裝載機服務：

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())
    );

  }
}

Answer 1

這不是錯誤，而是在您以--prod模式編譯應用程序后消失的煩人警告。

讓它靜音：

constructor(private changeDetector : ChangeDetectorRef) { }

ngAfterViewChecked(){
   this.changeDetector.detectChanges();
}