Получение 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

Использовать ChangeDetectionStrategy.OnPush

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

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

Answer 2

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

подробнее об этом

https://blog.angular -university.io / угловой отладки /