angular - 在 ngIf 中动态创建一个组件

Question

我使用的是 Angular 6，我尝试按照答案 here 进行操作但我无法让它工作

export class AppComponent implements AfterContentInit, AfterViewInit {
  defaultToTrue = true;
  @ViewChildren('parent', { read: ViewContainerRef }) parent: QueryList<ViewContainerRef>;

  constructor(private cfr: ComponentFactoryResolver) { }

  ngAfterViewInit(){
    const resolve = this.cfr.resolveComponentFactory(ChildComponent);
    this.parent.changes.subscribe(changes => {
      this.parent.createComponent(resolve); //Error
    });
  }

}

HTML:

<div *ngIf="defaultToTrue">
  <div #parent></div>
</div>

StackBlitz

Answer 1

要摆脱 ExpressionChangedAfterItHasBeenCheckedError，您可以使用 this Angular In Depth blog post 中建议的技术之一。 :

使用 ChangeDetectorRef.detectChanges 强制更改检测:

constructor(private cfr: ComponentFactoryResolver, private cd: ChangeDetectorRef) { }

ngAfterViewInit(){
  const resolve = this.cfr.resolveComponentFactory(ChildComponent);
  this.parent.changes.subscribe(changes => {
    this.parent.createComponent(resolve);
    this.cd.detectChanges();  // Trigger change detection
  });
}

使用 setTimeout 异步创建组件:

ngAfterViewInit(){
  const resolve = this.cfr.resolveComponentFactory(ChildComponent);
  this.parent.changes.subscribe(changes => {
    setTimeout(() => { this.parent.createComponent(resolve); });
  });
}