通过单步调试的方式学习|通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式
问题描述
我创建了一个 selector 为 app-content-section 的 Component，用于容纳内容投影(content projection)：
这个 Component 的模板区域，分别定义了三个 div 区域，里面包含了对应的内容投影占位符 ng-content:
文章图片
第一个绿色区域接收所有 div 标签，第二个蓝色区域接收所有包含了 css class content-class 的标签，第三个区域接收所有 name 属性值为 test 的标签。
我们来看看消费这个 Component 的代码：
div[name="test"]
纯粹的 div 标签p 标签，包含 [class="content-class] 和 six id
p 标签 [name="test"]
app-content-section中包含两个 div 元素，故最后的绿色区域里，包含了两个 div 值：
文章图片
文章图片
蓝色区域内只显示了一个 p 标签，因为这是消费者传入的元素里，唯一一个带有
content-class 类的元素。
文章图片
接下来的问题是，消费者传入的元素里，第一个 div 元素和最后一个 p 元素的
name 属性值都为 test，为什么只有最后一个 p 标签，被投影到 app-content-section 里呢？
文章图片
问题分析 第一个 div 标签同时满足第一条和第三条内容投影规则，因此其被投影到第一个
ng-content 之后，就不会再重复被投影了。【通过单步调试的方式学习|通过单步调试的方式学习 Angular 中带有选择器的内容投影使用方式】我们可以做一个测试，把提供内容投影场所的 Component 内的第一个和第三个
ng-content 调换一下顺序：
文章图片
这次的测试结果，红色区域出现的两个元素，其 name 属性值都为 test. 而虽然绿色区域容纳的是被投射的 div 元素，但是因为 name = test 的 div 元素，已经被优先投射到红色区域，所以它不会再被重复投射了。
文章图片
总结 通过单步调试 Angular content projection 的相关代码，也能确认上述逻辑。
当 Component 的模板文件被解析，遇到
ng-content 时：
文章图片
触发
??projection 函数。
文章图片
applyProjectionRecursive 函数里的 nodeToProject，就是需要被投影的 DOM 节点：
文章图片
可以看到这里只有包含了 name = test 属性值的 div 被 Angular 框架解析成需要被投影的节点。
推荐阅读
- 通过单步调试的方式学习|通过单步调试的方式学习 Angular 中 TView 和 LView 的概念
- 关于|关于 Angular view Query 的 id 选择器问题的单步调试
- Angular|Angular 内容投影出现 No provider for TemplateRef found 错误的单步调试
- Angular|Angular 内容投影 content projection 关于条件渲染问题的单步调试
- Angular|Angular 内容投影 content projection 关于选择器问题的单步调试
- Angular|Angular 基于自定义指令的内容投影 content projection 问题的单步调试
- 关于施加在|关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
- 关于|关于 ng-template 通过 @input 传入另一个 Component 不能工作的问题调试
- 单片机|K210识别数字（0~9）并与单片机通信通过数字来控制小车移动
- OpenResty入门