javascript - Angular 7 : ExpressionChangedAfterItHasBeenCheckedError while using Rxjs observbles

Question

我正在尝试使用 rxjs 主题在组件之间共享数据，并且我已在组件中使用该数据

Component.html

<div class="spinner-container"  *ngIf="loading">
      <div class="spinner-item">
          <nx-spinner nxSize="large"></nx-spinner>
      </div>
</div>  

组件.ts

ngOnInit(){
    setTimeout(()=>{
      this.commonService.spinnerTrigger.subscribe((trigger)=>{
        this.loading = trigger;
     })
    },100)
}

这是错误

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

我找到了使用 changeDetectref 的解决方法，但我认为没有其他方法可以解决此问题

Answer 1

您可以使用 ChangeDetectorRef 的 detectChanges() 方法手动触发更改检测

尝试这样:

从“@angular/core”导入{ChangeDetectorRef}；

构造函数(私有(private)cdr:ChangeDetectorRef){}

ngOnInit(){
    setTimeout(()=>{
      this.commonService.spinnerTrigger.subscribe((trigger)=>{
        this.loading = trigger;
        if (this.cdr && !(this.cdr as ViewRef).destroyed) {
           this.cdr.detectChanges();
        }
     })
    },100)
}