在這篇文章中，我們將會探索如何使用 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 替換為<ng-content> </ng-content>。
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>
在<app-btn></app-btn> 中的內容會傳遞給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中文網其他相關文章！
