# 问题描述

我创建了一个 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 #six 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 框架解析成需要被投影的节点。

ITPub博客

通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式

最新文章