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：无法读取未定义的属性“createComponent”

如果我把它放在ngAfterViewInit()，我得到错误：

检查后表情发生了变化

只有当我用setTimeout包装它才能工作，我不应该这样做。

我错过了什么？

Answer 1

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

Demo