子元素初始化后，父组件对子 DOM 的操作导致 ExpressionChangedAfterItHasBeenCheckedError

Posted 2023-02-19

【中文标题】子元素初始化后，父组件对子 DOM 的操作导致 ExpressionChangedAfterItHasBeenCheckedError

【英文标题】：After child has been initialised, operation from parent component on child DOM causes ExpressionChangedAfterItHasBeenCheckedError

【发布时间】：2019-06-01 23:32:19

【问题描述】：

我想在子组件初始化后从父组件对子组件进行一些操作。

家长：

export class ParentComponent implements AfterViewInit 
  @ViewChild('child') childComponent: ChildComponent;

  ngAfterViewInit() 
    this.childComponent.domMethod('boo');
  

<p>parent</p>

<app-child #child></app-child>

孩子：

export class ChildComponent implements OnInit 
  constructor(private readonly cdr: ChangeDetectorRef,) 

  
  public term = '';
  public items;
  ngOnInit() 
    this.items = [
       name: 'foo' ,
       name: 'bar' ,
       name: 'baz' ,
       name: 'boo' ,
       name: 'zoo' ,
    ];
  

  domMethod(value: string) 
    // const input = document.getElementById('childInput') as htmlInputElement;
    // input.value = value;
    this.term = value;
    this.cdr.markForCheck(); // <-- enabling this line cause ExpressionChangedAfterItHasBeenCheckedError
  

<p>child</p>

<input type="text" id="childInput" [(ngModel)]="term">

<ul>
    <li *ngFor="let item of items | search: term">item.name</li>
</ul>

链接到StackBlitz进行复制

编辑：

如果我将setTimeout 添加到父组件，它就可以工作。没有setTimeout可以实现吗？

  ngAfterViewInit() 
    setTimeout(() => 
      this.childComponent.domMethod('boo');
    )
  

【问题讨论】：

你试过setTimeOut吗？

是的，setTimeout 有效。只是好奇如果没有它是否可以实现

你想和this.cdr.detectionChanges();一起去吗？

这正是我想要的。谢谢！

【参考方案1】：

您为此使用了detectionChanges：

constructor(private _cd: ChangeDetectorRef)

ngAfterViewInit() 
      this.childComponent.domMethod('boo');
      this._cd.detectChanges();

  

【讨论】：

从哪里导入ChangeDetectionRef？

@OshanaDissanayake AppComponent

应该是 ChangeDetectorRef 吧？不是ChangeDetectionRef ?

@OshanaDissanayake import 组件，ChangeDetectorRef from '@angular/core'; private _cd: ChangeDetectorRef

是的！在您上面的答案中，它说constructor(private _cd: ChangeDetectionRef) :)