angular--ng-template&ngTemplateOutlet的用法

 1.ng-template指令介紹--<ng-template></ng-template>

 ng-template表示一個模板，標簽內是模板的內容，模板的內容可以與其它模板一起組成組件模板。

在Angular中，我們用過的許多結構指令都使用了ng-template，如ngIf、ngFor和ngSwitch。

ngTemplate中的內容可以自定義，並且一開始不會被渲染，除非滿足一定的條件。我們必須使用結構指令去渲染它。

<ng-template>

    <button class="tab-button" (click)="login()">{{loginText}}</button>

    <button class="tab-button" (click)="signUp()">{{signUpText}}</button>

</ng-template>

上面代碼在頁面中並沒有被渲染。

2.ng-template使用

2.1ng-template與ngIf

我們見的最多的可能是與ngIf一塊使用，當if條件不成立時，將顯示else中的內容。下面代碼中else語句被指向了一個名為loading的模板，通過模板引用#loading的方式。

<div class="lessons-list" *ngIf="lessons else loading">
  ... 
</div>

<ng-template #loading>
    <div>Loading...</div>
</ng-template>

其實，ngIf指令也是ng-template的包裝。

<ng-template [ngIf]="lessons" [ngIfElse]="loading">
   <div class="lessons-list">
     ... 
   </div>
</ng-template>

<ng-template #loading>
    <div>Loading...</div>
</ng-template>

[ngIf]和[ngIfElse]為模板輸入變量。

2.2同一元素使用多個結構指令

<div class="lesson" *ngIf="lessons" 
       *ngFor="let lesson of lessons">
    <div class="lesson-detail">
        {{lesson | json}}
    </div>
</div>  

這樣會報錯：

Uncaught Error: Template parse errors:
Can't have multiple template bindings on one element. Use only one attribute 
named 'template' or prefixed with *

這意味着不能在同一個元素使用兩個或多個結構指令。

<div *ngIf="lessons">
    <div class="lesson" *ngFor="let lesson of lessons">
        <div class="lesson-detail">
            {{lesson | json}}
        </div>
    </div>
</div>

可以在ngFor指令的外面包一層ngIf指令，這樣就解決了上面的問題；但這樣會額外創一個一個元素。因此，我們可以使用ng-container指令。

<ng-container *ngIf="lessons">
    <div class="lesson" *ngFor="let lesson of lessons">
        <div class="lesson-detail">
            {{lesson | json}}
        </div>
    </div>
</ng-container>

ng-container的一種用途是，給我們提供一個附加指令的元素而不會創建一個額外的元素。另一種用途是，配合ngTemplateOutlet使用。

3.ngTemplateOutlet使用介紹

ngTemplateOutlet也是一個指令，它使用模板引用和上下文對象作為參數動態實例化模板。作為一個結構指令，我們可以使用它在DOM的各個部分插入模板(由ng-template創建)。

 <ng-container *ngTemplateOutlet="loading">This text is not displayed</ng-container> 

ngTemplateOutlet包含的任何內部內容都不會被渲染；我們可以根據需要向頁面添加任意數量的ngTemplateOutlet標簽，並實例化許多不同的模板。

 <div *ngTemplateOutlet="loading"></div>  

上面代碼中的div並不會被渲染，因為angular將上述內容替換成ng-template語法,

 <ng-template [ngTemplateOutlet]="template1"><div></div></ng-template> 

3.1傳遞數據給ngTemplateOutlet

我們可以通過ngTemplateOutletContext屬性傳遞數據

<ng-template let-value="value" #messageTemplate>  
    <p>Value Received from the Parent is  {{value}}</p>
</ng-template>

<ng-container [ngTemplateOutlet]="messageTemplate" 
       [ngTemplateOutletContext] ="{value:'1000'}">
</ng-container> 

當然，也可以使用簡寫屬性--context:

 <ng-container *ngTemplateOutlet="messageTemplate; context:{value:100}"></ng-container>  傳遞多個數據：

<ng-template let-name="nameVar" let-message="messageVar" #template>  
  <p>Dear {{name}} , {{message}} </p>
</ng-template>
 
 
<ng-container [ngTemplateOutlet]="template" 
          [ngTemplateOutletContext] ="{nameVar:'Guest',messageVar:'Welcome to our site'}">
</ng-container> 

傳遞對象：

 
<ng-template let-person="person"  #template>  
  <p>Dear {{person.name}} , {{person.message}} </p>
</ng-template>
 
 
<ng-container [ngTemplateOutlet]="template" 
           [ngTemplateOutletContext] ="{ person:{name:'Guest',message:'Welcome to our site'} }">
</ng-container> 

使用$implicit:

可以在上下文對象中使用$implicit將其值設置為所有局部變量的默認值。

<ng-template let-name let-message="message" #template3>  
  <p>Dear {{name}} , {{message}} </p>
</ng-template>
 
<ng-container [ngTemplateOutlet]="templates" 
              [ngTemplateOutletContext] ="{$implicit:'Guest',message:'Welcome to our site'}">
</ng-container> 

上面代碼中，我們沒有給 let-name 賦值，因此它從$implicit中獲取值。

3.2模板上下文

每個模板可以定義自己的輸入變量；實際上，每個模板都關聯了一個上下文對象，其中包含所有特定於模板的輸入變量。

@Component({
  selector: 'app-root',
  template: `      
<ng-template #estimateTemplate let-lessonsCounter="estimate">
    <div> Approximately {{lessonsCounter}} lessons ...</div>
</ng-template>
<ng-container 
   *ngTemplateOutlet="estimateTemplate;context:ctx">
</ng-container>
`})
export class AppComponent {

    totalEstimate = 10;
    ctx = {estimate: this.totalEstimate};
  
}

說明：lessonsCounter為輸入變量，通過ng-template屬性使用前綴 let- 定義的

lessonsCounter對ng-template模板里面的內容是可見的，對模板外是不可見的。

lessonsCounter的值是由 estimate 決定的，故context 對象必須有一個estimate 的屬性。

3.3 模板引用

我們可以使用ViewChild裝飾器將模板直接注入到組件中：

@Component({
  selector: 'app-root',
  template: `      
      <ng-template #defaultTabButtons>
          <button class="tab-button" (click)="login()">
            {{loginText}}
          </button>
          <button class="tab-button" (click)="signUp()">
            {{signUpText}}
          </button>
      </ng-template>
`})
export class AppComponent implements OnInit {

    @ViewChild('defaultTabButtons')
    private defaultTabButtonsTpl: TemplateRef<any>;

    ngOnInit() {
        console.log(this.defaultTabButtonsTpl); //undefined; ngAfterViewInit()才會打印
    }

}

模板可以被注入，就像DOM元素和組件一樣，通過將模板引用傳給ViewChild裝飾器。

我們還可以將模板作為一個輸入變量：

@Component({
  selector: 'app-root',
  template: `      
<ng-template #customTabButtons>
    <div class="custom-class">
        <button class="tab-button" (click)="login()">
          {{loginText}}
        </button>
        <button class="tab-button" (click)="signUp()">
          {{signUpText}}
        </button>
    </div>
</ng-template>
<tab-container [headerTemplate]="customTabButtons"></tab-container>      
`})
export class AppComponent implements OnInit {

}

@Component({
    selector: 'tab-container',
    template: `
    
<ng-template #defaultTabButtons>
    
    <div class="default-tab-buttons">
        ...
    </div>
    
</ng-template>
<ng-container 
  *ngTemplateOutlet="headerTemplate ? headerTemplate: defaultTabButtons">
    
</ng-container>
... rest of tab container component ...
`})
export class TabContainerComponent {
    @Input()
    headerTemplate: TemplateRef<any>;
}

當我們傳入自定義模板時(#customTabButtons)，就顯示這個自定義模板；否則，顯示默認的模板。

3.4 ngTemplateOutlet、ng-template 與內容投影

父組件使用內容投影傳遞一個模板給子組件：

import { Component, TemplateRef, Input, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 
@Component({
  selector: 'parent1',
  template: `
  
  <h1>Parent Component </h1>
 
  <child1> 
    <p>This Template is Projected to the Child</p>
  </child1>
  `
})
export class Parent1Component {
}

子組件：

import { Component, TemplateRef, Input, OnInit, ViewChild, AfterViewInit } from '@angular/core';
 
@Component({
  selector: 'child1',
  template: `
 
  <h1>Child Component </h1>
 
  <ng-template #parentTemplate>
    <ng-content></ng-content>
  </ng-template>
 
  <ng-template [ngTemplateOutlet]="parentTemplate"></ng-template>
 
  `
})
export class Child1Component {
}
 

4.總結

ng-template、ng-container和ngTemplateOutlet指令結合使用，可以創建高度動態和可定制的組件。