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

时间：2023-04-02 21:21:27 HTML

通过单步调试了解如何在Angular中使用带有选择器的内容投影模板区域定义了三个div区域，其中包含对应的内容投影占位符ng-content：第一个绿色区域接收所有div标签，第二个蓝色区域接收所有CSS类content-class标签，第三区接收所有name属性值为test的标签。我们看一下消费这个Component的代码：div[name="test"]

纯div标签

p标签，包含[class="content-class]和六个id

p标签[name="test"]

app-content-section包含两个div元素，所以最后的绿色区域包含两个div值：蓝色区域只显示一个p标签，因为这是consumer传入的元素当中，唯一一个content-class类的元素，接下来的问题是，消费者传入的元素中，第一个div元素和最后一个p元素有name属性值test，为什么只有最后一个p标签投射到app中-content-section?问题分析第一个div标签同时满足第一条和第三条内容投影规则，所以在第一个ng-content之后投影，不会再投影。我们可以把提供内容投影站点的Component中第一个和第三个ng-content的顺序调换一下来做个测试：这次的测试结果，出现在红色区域的两个元素都有name属性的值作为测试。绿色区域虽然包含投影的div元素，但由于name=test的div元素已经优先投影到红色区域，所以不会重复投影。总结通过单步执行Angular内容投影的相关代码，也可以确认以上逻辑。当解析Component的模板文件，遇到ng-content时：触发??projection函数。applyProjectionRecursive函数中的nodeToProject就是需要投影的DOM节点：可以看到只有包含name=test属性值的div被Angular框架解析成了需要投影的节点。

上一篇：php、vue、vue-ssr做的页面有什么区别？

下一篇：JavaScript各种遍历方式详解，还有你不知道的黑科技

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