站長(zhǎng)資訊網(wǎng)本篇文章帶大家簡(jiǎn)單了解一下Angular模板的ng-template和ng-container指令，介紹一下ng-template和ng-container指令使用方法。
ng-template指令簡(jiǎn)介
ng-template是一個(gè) Angular 結(jié)構(gòu)型指令，用來(lái)渲染 HTML。 它永遠(yuǎn)不會(huì)直接顯示出來(lái)。 事實(shí)上，在渲染視圖之前，Angular 會(huì)把 ng-template 及其內(nèi)容替換為一個(gè)注釋。【相關(guān)教程推薦：《angular教程》】
如果沒(méi)有使用結(jié)構(gòu)型指令，而僅僅把一些別的元素包裝進(jìn) ng-template 中，那些元素就是不可見(jiàn)的。
像*ngFor、 *ngIf這些指令A(yù)ngular內(nèi)部會(huì)把這些屬性翻譯成一個(gè) 元素 并用它來(lái)包裹宿主元素。
ng-container指令簡(jiǎn)介
為了避免創(chuàng)建額外的div，我們可以改用ng-container，它是一個(gè)分組元素，但它不會(huì)污染樣式或元素布局，因?yàn)?Angular 壓根不會(huì)把它放進(jìn) DOM 中。ng-container 是一個(gè)由 Angular 解析器負(fù)責(zé)識(shí)別處理的語(yǔ)法元素。 它不是一個(gè)指令、組件、類(lèi)或接口，更像是 JavaScript 中 if 塊中的花括號(hào)。
ng-container用法
用法一（最基礎(chǔ)的用法）
我們?cè)谝粋€(gè)列表循環(huán)里有寫(xiě)時(shí)候有一些判斷要完成，我們知道angular的結(jié)構(gòu)指令是不允許兩個(gè)同時(shí)存在的，這個(gè)時(shí)候如果我們又不想增加多余的div就可以用ng-container
<ul> <ng-container *ngFor="let item of list"> <li *ngIf="item.context">{{item.context}}</li> </ng-container> </ul>
用法二（結(jié)合ngSwitch一起使用）
<ng-container [ngSwitch]="type"> <ng-container *ngSwitchCase="'title'">標(biāo)題</ng-container> <ng-container *ngSwitchCase="'text'">內(nèi)容</ng-container> <ng-container *ngSwitchDefault>其他</ng-container> </ng-container>
當(dāng)然ngSwitch也可以直接寫(xiě)在html標(biāo)簽上。
用法三（結(jié)合ng-template使用）
可以跟template配合使用，將重復(fù)的模塊內(nèi)容抽取出來(lái)，也可傳參給要顯示的模板。 比如下面的這個(gè)例子，甲方有甲方姓名和介紹，乙方也同樣有這些介紹，我們就可以把共同介紹整合出來(lái)。
<div> <!--甲方--> <div> <div class="left">甲方：</div> <div class="right"> 甲方姓名 <ng-container *ngTemplateOutlet="introduce; context: {data: data.partyA}"></ng-container> <!--也可以寫(xiě)成這種方式--> <!-- <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"就是上面?zhèn)鬟M(jìn)來(lái)的值--> <ng-template #introduce let-data="data"> <p>合同介紹......</p> </ng-template> </div>
ngTemplateOutlet是定義模板引用和模板的上下文(即ng-template)對(duì)象的字符串，這樣如果有多個(gè)模板引用可以用這種方式 ngTemplateOutletContext是附加到的上下文(即ng-template)對(duì)象EmbeddedViewRef。這應(yīng)該是一個(gè)對(duì)象，該對(duì)象的鍵可用于本地模板let 聲明的綁定。$implicit在上下文(即ng-template)對(duì)象中使用鍵會(huì)將其值設(shè)置為默認(rèn)值。 ngTemplateOutlet也可用于外部傳進(jìn)來(lái)的模板
child.component.html
<ng-template [ngTemplateOutlet]="tplRef" [ngTemplateOutletContext]="{data: data}"></ng-template>
child.component.ts
@Input() tplRef: TemplateRef<any>
ng-template用法
用法一
結(jié)合*ngIf使用，這樣可以不用加兩次不同判斷條件，可以在html里直接使用if else語(yǔ)句
<div *ngIf="text; else noData">{{text}}</div> <ng-template #noData> <div class="gary">暫無(wú)數(shù)據(jù)</div> </ng-template>
用法二
頁(yè)面里使用antd的modalService創(chuàng)建對(duì)話框時(shí)，可以模板寫(xiě)在html里面，通過(guò)引用加載過(guò)來(lái)放到modal的nzContent里（說(shuō)的有點(diǎn)亂了，看代碼吧）
<ng-tempalte #content>xxxxxxx</ng-template>
export class AppComponent implements OnInit { // 引入模板 @ViewChild('content') contentTpl: TemplateRef<any>; ngOnInit() { this.modalService.create({ nzTitle: '標(biāo)題', nzContent: this.contentTpl }) } }
用法三
以模板的形式，作為一個(gè)輸入變量傳給組件，這樣我們就可以在用這個(gè)組件時(shí)寫(xiě)成自己想要的內(nèi)容 比如我們寫(xiě)個(gè)共用的暫無(wú)數(shù)據(jù)的組件，一般只用傳text文字就可以有些特殊的時(shí)候我們可能需要一些新增按鈕。
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>
empty.component.ts
export class EmptyComponent { @Input() text: TemplateRef<any> isTemplate(text: any) { return text instanceof TemplateRef; } }
總結(jié)，都是一些最基礎(chǔ)的用法，現(xiàn)在所了解的就這些用法，如果有知道
