技術標籤：Angularangular2

ng-template

是一個 Angular 元素，用來渲染 HTML。 它永遠不會直接顯示出來。

ng-template僅是用於包含一個內容的模板，使得其可以與其他的模板鑲嵌組合成一個元件模板。

<ng-template #name>
	<button></button>
</ng-template>

正因為其不會顯示在DOM中，所以可以將一些指令放在上邊。

<ng-template #name *ngIf="true">
	<button></
 
button>
</ng-template>

但是如果有兩個指令相互巢狀使用，那麼能否全都放到 ng-template 上呢？答案是不可以的，angular是不允許將指令放在同一個標籤上的

所以我們還可以使用另一個模組標籤

ng-container

< ng-container> 是一個分組元素，但它不會汙染樣式或元素佈局，因為 Angular 壓根不會把它放進 DOM 中。

而且ng-container還會提供佔位，外層的元件可以將自定義模板動態的傳入到頁面。再結合*ng-temolateOutlet的屬性可以實現動態自定義元件。

@Component(
 
{
  selector: 'app-a-child',
  template: `
    <ng-container 
    	*ngTemplateOutlet="templateR? templateR :default; context: tempValue"
    ></ng-container>

<ng-template #default>
      <input placeholder="input" />
</ng-template>
`
})
export class AChildComponent
 
{

  @Input() templateR: TemplateRef<any>;
  tempValue= {name: 'hello', age: '18'};
}

<!--a.component.html-->

  <a-child [templateR]="btn"></a-child>
    <ng-template #btn let-person="name">
    	<button>{{name}}</button>
    </ng-template>
  

這樣就能實現父元件向子元件傳遞模組資訊從而實現自定義元件。

子元件中的ng-container當做佔位，根據父元件傳的templateR值來判斷將什麼當做元件內容，當父元件將引用變數btn傳給子元件，此時子元件就會整體的將引用變數渲染到佔位處。

參考：Angular ng-template、ng-container使用