Angular模板中ng-template和ng-container指令的用法

這篇文章主要講解了“Angular模板中ng-template和ng-container指令的用法”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Angular模板中ng-template和ng-container指令的用法”吧！

ng-template指令簡介

ng-template是一個 Angular 結(jié)構(gòu)型指令，用來渲染 HTML。 它永遠不會直接顯示出來。 事實上，在渲染視圖之前，Angular 會把 ng-template 及其內(nèi)容替換為一個注釋。

如果沒有使用結(jié)構(gòu)型指令，而僅僅把一些別的元素包裝進 ng-template 中，那些元素就是不可見的。

像*ngFor、 *ngIf這些指令A(yù)ngular內(nèi)部會把這些屬性翻譯成一個 元素 并用它來包裹宿主元素。

ng-container指令簡介

為了避免創(chuàng)建額外的div，我們可以改用ng-container，它是一個分組元素，但它不會污染樣式或元素布局，因為 Angular 壓根不會把它放進 DOM 中。ng-container 是一個由 Angular 解析器負責識別處理的語法元素。 它不是一個指令、組件、類或接口，更像是 JavaScript 中 if 塊中的花括號。

ng-container用法

用法一（最基礎(chǔ)的用法）

我們在一個列表循環(huán)里有寫時候有一些判斷要完成，我們知道angular的結(jié)構(gòu)指令是不允許兩個同時存在的，這個時候如果我們又不想增加多余的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'">標題</ng-container>
    <ng-container *ngSwitchCase="'text'">內(nèi)容</ng-container>
    <ng-container *ngSwitchDefault>其他</ng-container>
</ng-container>

當然ngSwitch也可以直接寫在html標簽上。

用法三（結(jié)合ng-template使用）

可以跟template配合使用，將重復(fù)的模塊內(nèi)容抽取出來，也可傳參給要顯示的模板。 比如下面的這個例子，甲方有甲方姓名和介紹，乙方也同樣有這些介紹，我們就可以把共同介紹整合出來。

<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"就是上面?zhèn)鬟M來的值-->
    <ng-template #introduce let-data="data">
        <p>合同介紹......</p>
    </ng-template>
</div>

ngTemplateOutlet是定義模板引用和模板的上下文(即ng-template)對象的字符串，這樣如果有多個模板引用可以用這種方式 ngTemplateOutletContext是附加到的上下文(即ng-template)對象EmbeddedViewRef。這應(yīng)該是一個對象，該對象的鍵可用于本地模板let 聲明的綁定。$implicit在上下文(即ng-template)對象中使用鍵會將其值設(shè)置為默認值。 ngTemplateOutlet也可用于外部傳進來的模板

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語句

<div *ngIf="text; else noData">{{text}}</div>
<ng-template #noData>
    <div class="gary">暫無數(shù)據(jù)</div>
</ng-template>

用法二

頁面里使用antd的modalService創(chuàng)建對話框時，可以模板寫在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
        })
    }
}

用法三

以模板的形式，作為一個輸入變量傳給組件，這樣我們就可以在用這個組件時寫成自己想要的內(nèi)容 比如我們寫個共用的暫無數(shù)據(jù)的組件，一般只用傳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>

empty.component.ts

export class EmptyComponent {
    @Input() text: TemplateRef<any>
  isTemplate(text: any) {
      return text instanceof TemplateRef;
  }
}

總結(jié)，都是一些最基礎(chǔ)的用法，現(xiàn)在所了解的就這些用法，如果有知道更多的歡迎大家補充。

感謝各位的閱讀，以上就是“Angular模板中ng-template和ng-container指令的用法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Angular模板中ng-template和ng-container指令的用法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！