分享
三行代码  ›  专栏  ›  技术社区  ›  Ansuman

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

  •  1
  • Ansuman  · 技术社区  · 1 周前

    <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)
      }
    }
    

    斯塔克布利茨- https://stackblitz.com/edit/angular-dynamic-template-context

    我有什么遗漏吗?

    1 回复  |  直到 1 周前
        1
  •  1
  •   yurzui    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