# 問題描述

我使用如下程式碼測試一個最簡單的 Angular 內容投影場景：

```html
import { Component } from '@angular/core';

@Component({
  selector: 'app-zippy-basic',
  template: `
    <h2>Single-slot content projection</h2>
    <ng-container></ng-container>
  `
})
export class ZippyBasicComponent {}
```

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

我期望 `app-zippy-basic` 的使用者，將傳入的 `content`，投射到元素 `ng-container` 內部。

消費程式碼如下圖所示：

```html
<app-zippy-basic>
    <p>Is content projection cool?</p>
    <div>ok</div>
</app-zippy-basic>
```

然而執行時，我在渲染出的頁面裡，根本看不到 `Is content projection cool?` 的顯示。

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

# 問題分析

開啟 Chrome 開發者工具，發現 `app-zippy-basic` 內部只有一個 comment 節點：ng-container

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

我們在提供內容投影插槽的 Component 的 ng-container 之間隨便鍵入一些字串，例如 DIV:

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

渲染後發現，ng-container 沒能按照我們期望的工作。

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

透過查閱 Angular 官網，發現這裡把 ng-container 和 ng-content 弄混淆了。此處應該使用 ng-content.

# 解決方案

`ng-content` 之間不允許再插入其他元素。僅僅充當一個佔位符的角色。

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

使用 `ng-content` 之後問題消失。這裡我們可以透過單步除錯的方式，搞清楚被投影的內容是如何插入到 ng-content 佔位符裡的。

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

選擇 `app-zippy-basic`，給其設定一個 dom 斷點，型別為 `subtree modification`：

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

首先執行 template 函式，將 Component 本身的 h2 元素，進行 HTML 原始碼的渲染：

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

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

接下來是 Angular 處理整個內容投影邏輯的關鍵：

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

遇到 `ng-content`，則呼叫函式 `ɵɵprojection`：

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

轉而呼叫 `applyProjection`：

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

parent node 即是指定義了 `ng-content` 的 Component 對應的 dom 元素：

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

rNode 即是被插入到 `app-zippy-basic` 中的節點，即 `app-zippy-basic` 的消費者。

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

消費語法：

```html
<app-zippy-basic>
此處插入你想投影到 app-zippy-basic 內部的 HTML 原始碼
</app-zippy-basic>
```

Angular 內容投影 content projection 的一個問題的單步除錯

相關文章