獲取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
})