角加载错误 ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：Angular Loading Error ExpressionChangedAfterItHasBeenCheckedError角加载错误 ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2021-06-12 20:15:33
【问题描述】：

我为我的应用程序中的所有请求创建了一个组件加载和一个拦截器，加载显示在屏幕上，直到请求完成。但是，每当我的路由器插座组件发生变化时，我都会收到错误消息。你能帮帮我吗？

我的错误：

错误错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'未定义'。当前值：“真”。似乎视图是在对其父级及其子级进行脏检查之后创建的。它是在变更检测挂钩中创建的吗？

我的代码：

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>

我的加载器服务：

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

  }
}

【问题讨论】：

标签： javascript html css angular

【解决方案1】：

这不是错误，这是一个恼人的警告，在您以 --prod 模式编译您的应用后消失。

让它静音：

constructor(private changeDetector : ChangeDetectorRef) { }

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

【讨论】：