在這篇文章中,我們將會探索如何使用 ng-content
進行內容投影,來建立靈活的可重複使用元件。
ng-content
元素是用來插入外部或動態內容的佔位符。父元件將外部內容傳遞給子元件,當 Angular 解析範本時,就會在子元件範本中 ng-content
出現的地方插入外部內容。
我們可以使用內容投影來建立可重複使用的元件。這些組件有相似的邏輯和佈局,並且可以在許多地方使用。一般我們在封裝一些公共組件的時候常常會用到。 【相關教學推薦:《angular教學》】
為了理解為什麼要使用ng-content
進行內容投影,首先讓我們來建立一個很常見的button 元件。
btn.component.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-btn', templateUrl: './btn.component.html', styleUrls: ['./btn.component.scss'], }) export class BtnComponent { constructor() {} onClick($event: any) { console.log($event); } }
btn.component.html
<button (click)=onClick($event)> Click Me </button>
在這個元件中,button 的文字總是Click Me
,如果我們想傳遞不同的文本進來呢?或許你會想到最常使用的 @Input
裝飾器,但如果我們不只是想傳文字進來,而是傳一段 html 進來呢?這時候就需要用到這篇文章的主角:ng-content
。
內容投影的最基本形式是單一插槽內容投影。單插槽內容投影是指創建一個元件,我們可以在其中投影一個元件。
要建立使用單一插槽內容投影的元件,我們只需要對上面的元件做一些簡單的修改:把Click Me
替換為d553bd28b5bbbbd4b6fb4990edbabbf0 78e68693bbc3a4be56286441c90e88e6
。
btn.component.html
<button (click)=onClick($event)> <ng-content></ng-content> </button>
在使用btn 元件的地方:
<app-btn>Cancel</app-btn> <app-btn><b>Submit</b></app-btn>
在4f5ea333ca342b306353367e241915b03e56165a02e29eb7b68166825115687f
中的內容會傳遞給btn 元件,並且顯示在ng-contnet
中。
上面的 btn 元件非常簡單,但實際上ng-content
要比這個更強大。一個元件可以有多個插槽,每個插槽可以指定一個 CSS 選擇器,該選擇器會決定要將哪些內容放入該插槽。此模式稱為多插槽內容投影。使用此模式,我們必須指定希望投影內容出現在的位置。可以透過使用 ng-content
的 select
屬性來完成此任務。
要建立使用多插槽內容投影的元件,需要執行以下操作:
#建立一個元件。
在元件範本中,加入 ng-content
元素,讓你希望投影的內容出現在其中。
將 select
屬性加入到 ng-content
元素。 Angular 使用的選擇器支援標籤名、屬性、CSS 類別和 :not
偽類的任意組合。
下面我們來建立一個複雜一些的 card 元件。
card.component.html
<div class="card"> <div class="header"> <ng-content select="header"></ng-content> </div> <div class="content"> <ng-content select="content"></ng-content> </div> <div class="footer"> <ng-content select="footer"></ng-content> </div> </div>
在使用card 元件的地方:
app.component.html
<app-card> <header> <h1>Angular</h1> </header> <content>One framework. Mobile & desktop.</content> <footer><b>Super-powered by Google </b></footer> </app-card> <app-card> <header> <h1 style="color:red;">React</h1> </header> <content>A JavaScript library for building user interfaces</content> <footer><b>Facebook Open Source </b></footer> </app-card>
如果在app- card
中有不屬於header, content, footer 以外的內容呢?例如依照下面的寫法使用app-card
元件:
app.component.html
<app-card> <header> <h1>Angular</h1> </header> <div>Not match any selector</div> <content>One framework. Mobile & desktop.</content> <footer><b>Super-powered by Google </b></footer> <div>This text will not not be shown</div> </app-card>
會發現兩個div
都沒有渲染在頁面中,為了解決這個問題,我們可以在元件中加入一個沒有任何selector
的ng-content
標籤。所有沒辦法匹配到任何其他插槽的內容都會被渲染在這個裡面。
card.component.html
<div class="card"> <div class="header"> <ng-content select="header"></ng-content> </div> <div class="content"> <ng-content select="content"></ng-content> </div> <div class="footer"> <ng-content select="footer"></ng-content> </div> <ng-content></ng-content> </div>
在某些情況下,我們需要使用ng-container
把一些內容包裹起來傳遞到組件中。大多數情況是因為我們需要使用結構型指令像 ngIf
或 ngSwitch
等。例如只有在某些情況下才會向 card 元件傳遞 header。
在下面的範例中,我們將 header 包裹在了 ng-container
中。
<app-card> <ng-container> <header> <h1>Angular</h1> </header> </ng-container> <content>One framework. Mobile & desktop.</content> <footer><b>Super-powered by Google </b></footer> </app-card>
由於ng-container
的存在,header 部分並沒有被渲染到我們想要渲染的插槽中,而是渲染到了沒有提供任何selector 的ng- content
中。
在這種情況下,我們可以使用 ngProjectAs
屬性。
在上面的 ng-container
加上這個屬性,就可以按照我們的期望來渲染了。
<app-card> <ng-container ngProjectAs='header'> ... </app-card>
更多程式相關知識,請造訪:程式設計教學! !
以上是淺談Angular如何使用ng-content進行內容投影的詳細內容。更多資訊請關注PHP中文網其他相關文章!