目錄
ng-template指令簡介
ng-container指令簡介
ng-container用法
ng-template用法
首頁 web前端 js教程 淺談Angular模板指令:ng-template和ng-container的用法

淺談Angular模板指令:ng-template和ng-container的用法

Aug 05, 2021 am 10:38 AM
angular 範本

本篇文章帶大家簡單了解一下Angular模板的ng-template和ng-container指令,介紹一下ng-template和ng-container指令使用方法。

淺談Angular模板指令:ng-template和ng-container的用法

ng-template指令簡介

#ng-template是一個 Angular 結構型指令,用來渲染 HTML。它永遠不會直接顯示出來。事實上,在渲染視圖之前,Angular 會把 ng-template 及其內容替換為一個註釋。 【相關教學推薦:《angular教學》】

如果沒有使用結構型指令,而僅僅把一些別的元素包裝進 ng-template 中,那些元素就是不可見的。

像是*ngFor、 *ngIf這些指令Angular內部會把這些屬性翻譯成一個 元素 並用它來包裹宿主元素。

ng-container指令簡介

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

ng-container用法

用法一(最基礎的用法)

我們在一個清單循環裡有寫時候有一些判斷要完成,我們知道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>
登入後複製

ng-template用法

用法一

結合*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>
登入後複製
######empty.component.ts######
export class EmptyComponent {
    @Input() text: TemplateRef<any>
  isTemplate(text: any) {
      return text instanceof TemplateRef;
  }
}
登入後複製
###總結,都是一些最基礎的用法,現在所了解的就這些用法,如果有知道更多的歡迎大家補充。 ######更多程式相關知識,請造訪:###程式設計影片###! ! ###

以上是淺談Angular模板指令:ng-template和ng-container的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何在Ubuntu 24.04上安裝Angular 如何在Ubuntu 24.04上安裝Angular Mar 23, 2024 pm 12:20 PM

如何在Ubuntu 24.04上安裝Angular

淺析angular中怎麼使用monaco-editor 淺析angular中怎麼使用monaco-editor Oct 17, 2022 pm 08:04 PM

淺析angular中怎麼使用monaco-editor

一文探究Angular中的服務端渲染(SSR) 一文探究Angular中的服務端渲染(SSR) Dec 27, 2022 pm 07:24 PM

一文探究Angular中的服務端渲染(SSR)

聊聊自訂angular-datetime-picker格式的方法 聊聊自訂angular-datetime-picker格式的方法 Sep 08, 2022 pm 08:29 PM

聊聊自訂angular-datetime-picker格式的方法

Angular元件及其顯示屬性:了解非block預設值 Angular元件及其顯示屬性:了解非block預設值 Mar 15, 2024 pm 04:51 PM

Angular元件及其顯示屬性:了解非block預設值

手把手帶你了解Angular中的依賴注入 手把手帶你了解Angular中的依賴注入 Dec 02, 2022 pm 09:14 PM

手把手帶你了解Angular中的依賴注入

PPT蒙版該怎麼添加 PPT蒙版該怎麼添加 Mar 20, 2024 pm 12:28 PM

PPT蒙版該怎麼添加

如何在 OneNote 中使用範本來提高工作效率 如何在 OneNote 中使用範本來提高工作效率 Apr 30, 2023 am 11:31 AM

如何在 OneNote 中使用範本來提高工作效率

See all articles