深入解析 ng-content

ng-content 是 Angular 中的一個非常重要的指令，它用於在模板中添加可插入的內容（內容投影）。本文將從多個方面對 ng-content 進行詳細的闡述。

一、ng-content介紹

Ng-content 是 Angular 的一個指令，用在組件中，用於在組件模板中插入內容（即內容投影）。Ng-content 的作用是把模板中的 HTML 元素插入到組件中，從而實現模板和組件之間的分離。

Ng-content 的語法：

<ng-content></ng-content>

注意：在實際使用中，可以使用 select 屬性來篩選模板中的具體內容，例如：

<ng-content select=".header"></ng-content>

這樣，僅會將模板中 class 為 “header” 的元素內容投影到組件中。

二、使用場景

ng-content 的主要作用是實現組件和模板的解耦，也就是說，模板和組件可以分別進行維護，不會互相干擾。這點非常有利於項目的維護和開發。以下是一些使用場景：

1. 組件模板的擴展

如果你要定義一個通用組件，但是又希望該組件的模板能夠根據不同的場景進行擴展，同時不影響組件的邏輯處理，那麼 ng-content 就是你的不二之選。

2. 列表組件

如果你要定義一個列表組件，通常情況下，列表的每個元素都有其獨特的樣式和布局。使用 ng-content 可以方便地讓每個列表元素根據需求進行布局。

3. 操作按鈕組件

如果你要定義一個操作按鈕組件，但是每個組件需要的按鈕是不同的，這時候可以在組件內部使用 ng-content，讓每個按鈕都成為內容投影。

三、投影方式

ng-content 支持多種投影方式，包括單內容投影和多內容投影。我們可以通過對 ng-content 元素不同的 select 屬性設置來控制投影的方式。

1. 單內容投影

通過設置 select 屬性，可以實現單個內容投影。例如：

<app-component>
  <h2 select=".header">Title</h2>
  <p select=".content">paragraph content</p>
</app-component>

這樣在組件中就能夠投影出 h2 和 p 元素了。需要注意的是，如果沒有設置 select，那麼不會被投影。

2. 多內容投影

另外一種投影方式是多個內容投影。在組件模板中，可以使用多個 ng-content 元素，每個 ng-content 元素都有自己的 select 屬性，用於篩選對應的投影內容。例如：

<app-component>
  <div>
    <ng-content select=".header"></ng-content>
  </div>
  <div>
    <ng-content select=".content"></ng-content>
  </div>
</app-component>

這樣在組件中就能夠分兩部分投影出 h2 和 p 元素了。需要注意的是，多個 ng-content 元素應該按照其出現在組件模板中的順序進行投影，也就是說，先出現的元素會先被投影，後出現的元素會後被投影。

四、投影內容樣式

在投影內容樣式方面， ng-content 給我們提供了一個特殊的選擇器： ::ng-deep。該選擇器可以穿透子組件中的樣式，並應用到投影內容上。例如：

/* 子組件樣式 */
:host {
  h2 {
    color: red;
  }
}

/* 父組件樣式 */
::ng-deep h2 {
  font-weight: bold;
}

在這個例子中，子組件的 h2 元素會被設置為紅色，而 ng-deep 選擇器會將父組件中的 h2 標籤設置為加粗字體。

五、結論

ng-content 是 Angular 中非常重要的一個指令，它提供了內容投影的功能，可以實現組件和模板的解耦。在實際開發中，根據不同的需求和場景，我們可以選擇不同的投影方式和樣式設置，以便更好地實現我們的功能。