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() { }
}

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

子组件的HTML格式

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

export class LoadingSpinnerComponent implements OnInit {

  @Input() textBloc: string;

  constructor(
    public activeModal: NgbActiveModal,
  ) { }

  ngOnInit() { }
}

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

当我加载页面时，我得到了这个错误

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='';
}

---

如果使用

{{textBloc|translate}

而不是绑定到innerHTML，是否会出现相同的错误？是的，首先是这样的，您是否尝试在子组件上使用ngOnChanges钩子ngOnChanges（changes:SimpleChanges）{if（changes.textBloc）{this.textBloc=changes.textBloc.currentValue；}}}在呈现DOM之前，您的子组件不会修改输入

text

，因此我猜您的指令是罪魁祸首。你的

| translate

做什么？它是否修改

textBloc

？我正在使用库，它将变量名转换为字符串。但即使我删除

translate

，我也会得到同样的错误。