typescript - 在 Angular 中父組件與子組件之間檢查後表達式已改變

我有一個父組件，它會呼叫一個子加載旋轉組件。

我正在使用一個屬性來傳遞訊息。

在父組件中

<app-loading-spinner textBloc="LOADING_DATA_IN_PROGRESS"></app-loading-spinner>

在子組件中

export class LoadingSpinnerComponent implements OnInit {

  @Input() textBloc: string;

  constructor(
    public activeModal: NgbActiveModal,
  ) { }

  ngOnInit() { }
}

在子組件的 HTML 中

<div class="text-center">
  <label>
    <p [innerHTML]='textBloc | translate'></p>
  </label>
</div>

我正在使用翻譯模塊來從 JSON 文件渲染文字

"LOADING_DATA_IN_PROGRESS": "Chargement des données en cours, veuillez patienter...",

當我載入頁面時，我收到此錯誤

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'innerHTML: undefined'. Current value: 'innerHTML: Chargement des données en cours, veuillez patienter...'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

我已經讀過許多關於這個錯誤的文章，但仍然無法理解當 textBloc 未定義時會發生什麼。

我嘗試在建構子裡初始化 textBloc

constructor(
  public activeModal: NgbActiveModal,
) { 
  this.textBloc='';
}