本篇文章帶大家簡單了解一下Angular模板的ng-template和ng-container指令，介紹一下ng-template和ng-container指令使用方法。
#ng-template是一個 Angular 結構型指令，用來渲染 HTML。它永遠不會直接顯示出來。事實上，在渲染視圖之前，Angular 會把 ng-template 及其內容替換為一個註釋。 【相關教學推薦：《angular教學》】
如果沒有使用結構型指令，而僅僅把一些別的元素包裝進 ng-template 中，那些元素就是不可見的。
像是*ngFor、 *ngIf這些指令Angular內部會把這些屬性翻譯成一個 元素 並用它來包裹宿主元素。
為了避免創建額外的div，我們可以改用ng-container，它是一個分組元素，但它不會污染樣式或元素佈局，因為Angular 壓根不會把它放進DOM 中。 ng-container 是一個由 Angular 解析器負責辨識處理的語法元素。它不是一個指令、元件、類別或接口，更像是 JavaScript 中 if 區塊中的花括號。
用法一（最基礎的用法）
我們在一個清單循環裡有寫時候有一些判斷要完成，我們知道angular的結構指令是不允許兩個同時存在的，這個時候如果我們又不想增加多餘的div就可以用ng-container
<ul>
<ng-container *ngFor="let item of list">
<li *ngIf="item.context">{{item.context}}</li>
</ng-container>
</ul>用法二（結合ngSwitch一起使用）
<ng-container [ngSwitch]="type">
<ng-container *ngSwitchCase="'title'">标题</ng-container>
<ng-container *ngSwitchCase="'text'">内容</ng-container>
<ng-container *ngSwitchDefault>其他</ng-container>
</ng-container>#當然ngSwitch也可以直接寫在html標籤上。
用法三（結合ng-template使用）
可以跟template搭配使用，將重複的模組內容抽取出來，也可傳參給要顯示的模板。 例如下面的這個例子，甲方有甲方姓名和介紹，而乙方也同樣有這些介紹，我們就可以把共同介紹整合出來。
<div>
<!--甲方-->
<div>
<div class="left">甲方：</div>
<div class="right">
甲方姓名
<ng-container *ngTemplateOutlet="introduce; context: {data: data.partyA}"></ng-container>
<!--也可以写成这种方式-->
<!--
<ng-container [ngTemplateOutlet]="introduce"
[ngTemplateOutletContext]="{data: data.partyA}">
</ng-container>
[ngTemplateOutlet]也可用在ng-template上
-->
</div>
</div>
<!--乙方-->
<div>
<div class="left">乙方：</div>
<div class="right">
乙方姓名
<ng-container *ngTemplateOutlet="introduce; context: {data: data.partyB}"></ng-container>
</div>
</div>
<!--let-data="data"就是上面传进来的值-->
<ng-template #introduce let-data="data">
<p>合同介绍......</p>
</ng-template>
</div>ngTemplateOutlet是定義模板參考和模板的上下文(即ng-template)物件的字串，這樣如果有多個模板引用可以用這種方式 ngTemplateOutletContext是附加到的上下文(即ng-template)物件EmbeddedViewRef。這應該是一個對象，該對象的鍵可用於本地模板let 聲明的綁定。 $implicit在上下文(即ng-template)物件中使用鍵會將其值設為預設值。 ngTemplateOutlet也可用於外部傳送進來的模板
child.component.html
<ng-template [ngTemplateOutlet]="tplRef" [ngTemplateOutletContext]="{data: data}"></ng-template>child.component.ts
#@Input() tplRef: TemplateRef<any>
用法一
結合*ngIf使用，這樣可以不用加兩次不同判斷條件，可以在html裡直接使用if else語句
<div *ngIf="text; else noData">{{text}}</div>
<ng-template #noData>
<div class="gary">暂无数据</div>
</ng-template>用法二
頁面裡使用antd的modalService建立對話方塊時，可以模板寫在html裡面，透過引用載入過來放到modal的nzContent裡（說的有點亂了，看程式碼吧）
<ng-tempalte #content>xxxxxxx</ng-template>
export class AppComponent implements OnInit {
// 引入模板
@ViewChild('content') contentTpl: TemplateRef<any>;
ngOnInit() {
this.modalService.create({
nzTitle: '标题',
nzContent: this.contentTpl
})
}
}##用法三
################ ####以模板的形式，作為一個輸入變數傳給元件，這樣我們就可以在用這個元件時寫成自己想要的內容 例如我們寫個共用的暫無資料的元件，一般只用傳text文字就可以有些特殊的時候我們可能需要一些新增按鈕。 #########empty.component.html######
<div>
<img src=""/>
<div>
<ng-container [ngSwitch]="true">
<ng-container *ngSwitchCase="isTemplate(text)"
[ngTemplateOutlet]="text"
></ng-container>
</ng-container>
{{text || ''}}
</div>
</div>export class EmptyComponent {
@Input() text: TemplateRef<any>
isTemplate(text: any) {
return text instanceof TemplateRef;
}
}以上是淺談Angular模板指令：ng-template和ng-container的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
