目錄
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="&#39;title&#39;">标题</ng-container>
    <ng-container *ngSwitchCase="&#39;text&#39;">内容</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(&#39;content&#39;) contentTpl: TemplateRef<any>;
    ngOnInit() {
        this.modalService.create({
            nzTitle: &#39;标题&#39;,
            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 || &#39;&#39;}}
    </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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++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

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

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

你知道 Angular Universal 嗎?可以幫助網站提供更好的 SEO 支援哦!

如何使用PHP和Angular進行前端開發 如何使用PHP和Angular進行前端開發 May 11, 2023 pm 04:04 PM

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

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

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

使用Angular和Node進行基於令牌的身份驗證 使用Angular和Node進行基於令牌的身份驗證 Sep 01, 2023 pm 02:01 PM

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

PHP電子郵件範本:客製化和個人化您的郵件內容。 PHP電子郵件範本:客製化和個人化您的郵件內容。 Sep 19, 2023 pm 01:21 PM

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

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

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

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

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

See all articles