Angular怎么使用ng-content進行內容投影

小編給大家分享一下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>
    <h2>Angular</h2>
  </header>
  <content>One framework. Mobile & desktop.</content>
  <footer><b>Super-powered by Google </b></footer>
</app-card>

<app-card>
  <header>
    <h2 style="color:red;">React</h2>
  </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>
    <h2>Angular</h2>
  </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>
      <h2>Angular</h2>
    </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進行內容投影”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！