angular - 获取组件中动态模板的内容

Question

这是模板:

<button (click)="loadTemplate()">Load Template</button>
<ng-template #tmpl let-name>
    <h2>hello</h2>
    <h2>{{name}}</h2>
</ng-template>

这是组件:

export class AppComponent {
  @ViewChild("tmpl", { read: TemplateRef, static: false }) tmpl: TemplateRef<any>;

  loadTemplate() {
    const viewRef = this.tmpl.createEmbeddedView({ $implicit: "angular" })
    alert('content for static h2 element: ' + viewRef.rootNodes[0].textContent)
    alert('content for dynamic h2 element: ' + viewRef.rootNodes[1].textContent)
  }
}

当我记录“viewRef.rootNodes”时，我可以看到静态文本“hello”，但我正在通过隐式上下文传递的动态文本“angular”丢失。

Stackblitz - https://stackblitz.com/edit/angular-dynamic-template-context

有什么我在这里遗漏的吗？

Answer 1

您错过了动态数据需要变更检测周期才能发生的事实:

const viewRef = this.tmpl.createEmbeddedView({ $implicit: "angular" });
viewRef.detectChanges(); // try adding this
alert('content for static h2 element: ' + viewRef.rootNodes[0].textContent)
alert('content for dynamic h2 element: ' + viewRef.rootNodes[1].textContent)

Forked Stackblitz