ng6的ng-template的一個用法

組件模板：

<ng-template #tpl>

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

</ng-template>

 

ts 組件內：

@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);

}

 

以上兩個方法均可以把tpl模板內容插入到組件中。

但第一種方法沒法插入name的值。  參數是context，不明白它的context是要傳遞什麼進去