Angular 6：生命周期钩子问题中的createComponent

Question

我正在尝试动态创建一个组件，并像这样设置Angular 6代码

HTML：

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

TS：

在构造函数之前

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

组件创建：

const entryFormFactory = this.resolver.resolveComponentFactory(entryFormComponent);
const entryComponent = this.entry.createComponent(entryFormFactory);`

如果我将以上两行放在ngAfterContentInit()中，我会收到错误：

  

错误：TypeError：无法读取属性＆＃39; createComponent＆＃39;未定义的

如果我把它放在ngAfterViewInit()中，我会收到错误：

  

检查后表情发生了变化

仅当我将其包裹在setTimeout中时，它才有用。我不应该这样做。

我错过了什么？

Answer 1

用#parent模板变量标记的元素包含在带有* ngIf的div中。但是，* ngIf将根据表达式从DOM中删除该元素。这意味着在创建类时，@ Viewchild引用了一个未定义的非现有元素，生命周期钩子尚未运行。
我建议你用[hidden]替换* ngIf。

Demo