在 ngAfterViewInit 中调用 ViewContainerRef 时未定义答案

【问题标题】：ViewContainerRef is undefined when called in ngAfterViewInit在 ngAfterViewInit 中调用 ViewContainerRef 时未定义
【发布时间】：2019-02-26 00:53:24
【问题描述】：

我想在父组件初始化的时候动态创建一个子组件，但是当我尝试在ngAgterViewInit()中创建它时，它会抛出ViewContainerRef未定义的错误。

组件.ts

  @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {
  }

  ngAfterViewInit(){
    const factory = this.resolver.resolveComponentFactory(ChildComponent);
    this.container.createComponent(factory); //container is undefined here

  }

component.html

...
<div class="row" #container ></div>
...

【问题讨论】：

div 是否在 ngIf 条件块内？
代码本身运行正常，刚刚试了一下。
@ConnorsFan，是的，它在 ngIf 中
stackoverflow.com/questions/50789503/…

标签： angular angular6 viewchild

【解决方案1】：

由于div 在ngIf 条件块内，它可能在ngAfterViewInit 中不可用。您可以通过使用ViewChildren 和QueryList.changes 事件监视元素的存在来保护代码免受这种可能性：

@ViewChildren('container', { read: ViewContainerRef }) containers: QueryList<ViewContainerRef>;

ngAfterViewInit() {
  if (this.containers.length > 0) {
    // The container already exists
    this.addComponent();
  };

  this.containers.changes.subscribe(() => {
    // The container has been added to the DOM
    this.addComponent();
  });
}

private addComponent() {
  const container = this.containers.first;
  const factory = this.resolver.resolveComponentFactory(ChildComponent);
  container.createComponent(factory);
}

请参阅this stackblitz 以获取演示。

【讨论】：