# 問題描述

我建立了一個 selector 為 `app-content-section` 的 Component，用於容納內容投影(`content projection`)：

這個 Component 的模板區域，分別定義了三個 div 區域，裡面包含了對應的內容投影占位符 `ng-content`:
![](https://img-blog.csdnimg.cn/img_convert/0c724a989e73c416b25f92db790c2f6e.png)

第一個綠色區域接收所有 div 標籤，第二個藍色區域接收所有包含了 css class `content-class` 的標籤，第三個區域接收所有 name 屬性值為 test 的標籤。

我們來看看消費這個 Component 的程式碼：

```html
<app-content-section>
    <div name="test">div[name="test"]</div>
    <div>純粹的 div 標籤</div>
    <p class="content-class">p 標籤，包含 [class="content-class] 和 six id</p>
    <p name="test">p 標籤 [name="test"]</p>
</app-content-section>
```
- `app-content-section` 中包含兩個 div 元素，故最後的綠色區域裡，包含了兩個 div 值：
![](https://img-blog.csdnimg.cn/img_convert/9b161434ca30a9684eb5bc6bb25ed278.png)

![](https://img-blog.csdnimg.cn/img_convert/19830ddc24c1ebb2cb2328517b6f3542.png)

藍色區域內只顯示了一個 p 標籤，因為這是消費者傳入的元素裡，唯一一個帶有 `content-class` 類的元素。

![](https://img-blog.csdnimg.cn/img_convert/e9b20ed741f01661f3a2f6ff282a3342.png)

接下來的問題是，消費者傳入的元素裡，第一個 div 元素和最後一個 p 元素的 `name` 屬性值都為 `test`，為什麼只有最後一個 p 標籤，被投影到 `app-content-section` 裡呢？

![](https://img-blog.csdnimg.cn/img_convert/70697f1259abda8188112944aa54a19e.png)

# 問題分析

第一個 div 標籤同時滿足第一條和第三條內容投影規則，因此其被投影到第一個 `ng-content` 之後，就不會再重複被投影了。

我們可以做一個測試，把提供內容投影場所的 Component 內的第一個和第三個 `ng-content` 調換一下順序：

![](https://img-blog.csdnimg.cn/img_convert/734da9b6ff7cb8c5a789178f21180d83.png)

這次的測試結果，紅色區域出現的兩個元素，其 name 屬性值都為 test. 而雖然綠色區域容納的是被投射的 div 元素，但是因為 name = test 的 div 元素，已經被優先投射到紅色區域，所以它不會再被重複投射了。
![](https://img-blog.csdnimg.cn/img_convert/8c346e2562695d1d59d6481206f9fd57.png)

# 總結

通過單步除錯 Angular content projection 的相關程式碼，也能確認上述邏輯。

當 Component 的模板檔案被解析，遇到 `ng-content` 時：

![](https://img-blog.csdnimg.cn/img_convert/d304cac0fc8a89e7e89c912f4daf90f4.png)

觸發 `ɵɵprojection` 函式。

![](https://img-blog.csdnimg.cn/img_convert/720da03562a55723876f684f1ab53040.png)

`applyProjectionRecursive` 函式裡的 `nodeToProject`，就是需要被投影的 DOM 節點：

![](https://img-blog.csdnimg.cn/img_convert/db0a77ae70acf0c136a815e90976db56.png)

可以看到這裡只有包含了 name = test 屬性值的 div 被 Angular 框架解析成需要被投影的節點。

通過單步除錯的方式學習 Angular 中帶有選擇器的內容投影使用方式

相關文章