Angular - 同一组件中的 ExpressionChangedAfterItHasBeenCheckedError

Question

我有一个简单的 Angular 5 应用程序，它带有一个 HttpInterceptor，它会在发出请求时通知服务。组件可以订阅此服务以获取此信息。

此处有错误的完整示例=> https://stackblitz.com/edit/angular-5b86se

在我的 AppComponent 中，当在我的子组件 (HelloComponent) 中发出请求时，我想显示一个加载指示器。

import { Component } from '@angular/core';
import { LoadingIndicatorService } from './loading-indicator.service';

@Component({
  selector: 'my-app',
  template: `<div *ngIf="loading" style="color:red">pretend this is loading indicator</div>
<hello name="{{ name }}"></hello>`
})
export class AppComponent  {
  name = 'Angular 5';
   loading: boolean = false;

   constructor(private loadingIndicatorService: LoadingIndicatorService) { 

    loadingIndicatorService
      .onLoadingChanged
      .subscribe(isLoading => this.loading = isLoading);
  }
}

我收到以下错误:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

如果我是对的，当子组件更改父组件中的值时会出现此错误。

但我的子组件 (HelloComponent) 只执行 HttpGet 而 HttpInterceptor 正在通过服务更改父组件 (AppComponent)有一个可观察的。

在这里，转换服务不应该是正确的解决方案吗？有人可以解释为什么这不起作用吗？

Answer 1

它会抛出错误，因为当 onLoadingChanged 被调用时，您的变量加载得到更新。这意味着您的初始值已更改。

我建议您阅读有关 here 的更多信息

一般的解决办法是，

    constructor(private loadingIndicatorService: LoadingIndicatorService,private ref: ChangeDetectorRef) { 
    loadingIndicatorService.onLoadingChanged.subscribe(isLoading => {
       this.loading = isLoading
       this.ref.detectChanges();
    });
 }