获取ExpressionChangedAfterItHasBeenCheckedError

Question

在多个位置使用订阅行为对象以进行加载的组件时获得ExpressionChangedAfterItHasBeenCheckedError。将组件加载到一个组件中并尝试在另一组件中load或destroy时发生错误。

@Component({
template: 'common.component.html',
selector: 'app-common'
})

export CommonComponent implements OnInit{

constructor(service: MyService){}

ngOnInit(){
}

}

**common.component.html**

<div>
    <div *ngIf="service.isLoading$ | async">Loading...</div>
</div>


**component 1**

<div>
    <app-common></app-common>
</div>

component 2

<div>
    <app-common></app-common>
</div>


@Injectable()
export class MyService {
  public isLoading = new BehaviorSubject<any>(false);
  public isLoading$ = this.isLoading.asObservable();
}```

Answer 1

public isLoading$ = this.isLoading.asObservable().pipe(delay(0))

更多信息

https://blog.angular-university.io/angular-debugging/

Answer 2

使用ChangeDetectionStrategy.OnPush

import { ChangeDetectionStrategy } from '@angular/core';

@Component({template: 'common.component.html',
   selector: 'app-common',
   changeDetection: ChangeDetectionStrategy.OnPush
})