淺談Angular如何使用ng-content進行內容投影

在這篇文章中，我們將會探索如何使用 ng-content 進行內容投影，來建立靈活的可重複使用元件。

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>

ngProjectAs

在某些情況下，我們需要使用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=&#39;header&#39;>
    ...
</app-card>

更多程式相關知識，請造訪：程式設計教學！ ！

以上是淺談Angular如何使用ng-content進行內容投影的詳細內容。更多資訊請關注PHP中文網其他相關文章！