ng6的ng-template的一个用法 原

<ng-template #tpl>

      <div>i am in tpl {{name }} </div>

</ng-template>

@ViewChild('tpl') tpl: TemplateRef<any>;

@ViewChild('tpl', {read: ViewContainerRef}) vc: ViewContainerRef;  // tpl 和 vc同时绑定到一个元素上（竟然可以)
  name = "123";
ngAfterViewInit() {

// 方法1 ：通过tpl自己创建一个view，把view的第一个node插入到注释节点之前

const embeddedView = this.tpl.createEmbeddedView( null ); //模板的name显示不出， 传入this也不行

const p = this.tpl.elementRef.nativeElement.parentNode as HTMLElement;

p.insertBefore(embeddedView.rootNodes[0], this.tpl.elementRef.nativeElement);

// 方法2 ： tpl 和 vc同时绑定到一个元素上（竟然可以）。 然后vc创建后tpl，直接插入到页面中

this.vc.createEmbeddedView(this.tpl);

}