[Angular] Template Tag

Angular2裡面有提供一個 * 的語法糖, 這個語法糖是用來表示 <template> 標籤. 例如 *ngIf 、 *ngFor 等, 而這篇就來討論怎麼利用 <template>

Template Tag

來先看一段Code吧

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'my-dynamic-component',
  template: `<div>Hello world</div>`
})
export class MyDynamicComponent{  
}

@Component({
  selector: 'app-root',  
  template: `
  <div>
    <template #target></template>
    <h1>{{title}}</h1>
  </div>
` 
})

export class AppComponent {
  @ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef;

  title = 'app works!';
  constructor(private cfr: ComponentFactoryResolver){   
  }

  ngAfterViewInit(){
     let myFactory = this.cfr.resolveComponentFactory(MyDynamicComponent);
     let compRef = this.target.createComponent(myFactory);
     
  }
}

這段Code有幾個地方要解釋一下的是

1. <template>是一個placeholder, 像是註記符號，讓angular2知道說要將template注入到哪一個位置
2. ViewContainerRef 是代表容器的位置
3. ComponentFactoryResolver是動態產生Component的一個Factory Class

動態產生Component不會在此探討，會留在以後來做討論. 重點是 <template> 這個所產生出來的結果

紅色框起來的就是在上面 <template> 的所在位置，而所要產生的html會在下方被注入。同樣的運作原理適用於 Rotuer

以上就是介紹 『