淺談Angular模板指令:ng-template和ng-container的用法
本篇文章帶大家簡單了解一下Angular模板的ng-template和ng-container指令,介紹一下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>
export class EmptyComponent { @Input() text: TemplateRef<any> isTemplate(text: any) { return text instanceof TemplateRef; } }
以上是淺談Angular模板指令:ng-template和ng-container的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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

Angular.js是一種可自由存取的JavaScript平台,用於建立動態應用程式。它允許您透過擴展HTML的語法作為模板語言,以快速、清晰地表示應用程式的各個方面。 Angular.js提供了一系列工具,可協助您編寫、更新和測試程式碼。此外,它還提供了許多功能,如路由和表單管理。本指南將討論在Ubuntu24上安裝Angular的方法。首先,您需要安裝Node.js。 Node.js是一個基於ChromeV8引擎的JavaScript運行環境,可讓您在伺服器端執行JavaScript程式碼。要在Ub

隨著網路的快速發展,前端開發技術也不斷改進與迭代。 PHP和Angular是兩種廣泛應用於前端開發的技術。 PHP是一種伺服器端腳本語言,可以處理表單、產生動態頁面和管理存取權限等任務。而Angular是一種JavaScript的框架,可以用來開發單一頁面應用程式和建構元件化的網頁應用程式。本篇文章將介紹如何使用PHP和Angular進行前端開發,以及如何將它們

angular中怎麼使用monaco-editor?以下這篇文章記錄下最近的一次業務中用到的 monaco-editor 在 angular 中的使用,希望對大家有幫助!

身份驗證是任何網路應用程式中最重要的部分之一。本教程討論基於令牌的身份驗證系統以及它們與傳統登入系統的差異。在本教程結束時,您將看到一個用Angular和Node.js編寫的完整工作演示。傳統身份驗證系統在繼續基於令牌的身份驗證系統之前,讓我們先來看看傳統的身份驗證系統。使用者在登入表單中提供使用者名稱和密碼,然後點擊登入。發出請求後,透過查詢資料庫在後端驗證使用者。如果請求有效,則使用從資料庫中獲取的使用者資訊建立會話,然後在回應頭中傳回會話訊息,以便將會話ID儲存在瀏覽器中。提供用於存取應用程式中受

PHP電子郵件範本:客製化和個人化您的郵件內容隨著電子郵件的普及和廣泛應用,傳統的郵件範本已經無法滿足人們對個人化和客製化郵件內容的需求。現在,我們可以透過使用PHP程式語言來創建客製化和個人化的電子郵件範本。本文將為您介紹如何使用PHP來實現這一目標,並提供一些具體的程式碼範例。一、建立郵件範本首先,我們需要建立一個基本的郵件範本。這個模板可以是一個HTM

Angular框架中元件的預設顯示行為不是區塊級元素。這種設計選擇促進了元件樣式的封裝,並鼓勵開發人員有意識地定義每個元件的顯示方式。透過明確設定CSS屬性 display,Angular組件的顯示可以完全控制,從而實現所需的佈局和響應能力。

怎麼自訂angular-datetime-picker格式?以下這篇文章聊聊自訂格式的方法,希望對大家有幫助!
