Angular中動態模板管理期間的ExpressionChangedAfterItHasBeenCheckedError

Question

我需要動態管理模板。 我想顯示或隱藏一些基於WebSocket消息或用戶交互后更改的參數的視圖。 我為此使用ngIf，但是有時（尤其是當我重新加載視圖時，消息很快出現）控制台收到一個錯誤

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

我使用Angular 8

主要成分

export class MainComponent implements AfterViewInit, OnInit {

 public view_config;

 constructor(public pluginInfoService: PluginInfoService){}

 ngOnInit() {
   this.pluginInfoService.getViewConfig().subscribe(view_config => {
     this.view_config = view_config;
   });
 }

}

主要組件模板

<popup-window *ngIf="view_config.show_popup_window" class="overflow_hidden h-100 w-100" [view_config]="view_config">
  <select-media *ngIf="view_config.popup_window_mode == 'select_media'" [view_config]="view_config" class="container-fluid h-100"></select-media>
  <get-contact-name *ngIf="view_config.popup_window_mode == 'get_contact_name'" [view_config]="view_config" class="container-fluid h-100"></get-contact-name>
  <chat-view *ngIf="view_config.popup_window_mode == 'chat_view'" class="container-fluid h-100 flex-column d-flex p-0"></chat-view>
  <change-media-invitation *ngIf="view_config.popup_window_mode == 'media_change_invite'" [view_config]="view_config" class="container-fluid h-100"></change-media-invitation>
</popup-window>

插件信息服務

export class PluginInfoService {

  private view_config = {
    show_main_button: true,
    show_popup_window: true,
    popup_window_mode: 'select_media',
    show_popup_media_window: false,
    popup_media_window_mode: null,
    minimize_popup_window: false
  };

  private viewConfigStream = new BehaviorSubject(this.view_config);

  constructor() {
  }

  setViewConfigParam(param, value) {
    this.view_config[param] = value;
    this.viewConfigStream.next(this.view_config);
  }

  getViewConfig(): Observable<any> {
    return this.viewConfigStream.asObservable();
  }
}

該機制已經起作用，但我想它會帶來更多問題。 首先，我不想出現此錯誤，其次，我想確保所有操作均正確執行。 如何解決這個問題？ 這種方法好嗎？

Answer 1

如果要避免在生命周期仍在生成頁面的過程中對視圖進行可能的更改，則可以簡單地掛接到后面的位置，例如

更換

ngOnInit()

與

ngAfterViewInit()