问题描述我用下面的代码测试最简单的Angular内容投影场景：import{Component}from'@angular/core';@Component({selector:'app-zippy-basic',template:`
Single-slotcontentprojection
`})exportclassZippyBasicComponent{}我希望使用app-zippy-basic或者，将传入的内容投射到元素ng-container中。消费代码如下图所示：我在渲染的页面中，看不到显示内容投影酷吗？根本。问题分析打开Chrome开发者工具，发现app-zippy-basic里面只有一个注释节点：ng-container我们在提供内容投影槽的Component的ng-container之间随机打一些字符串，比如DIV：渲染后发现，ng-container并没有像我们预期的那样工作。通过查看Angular官网，发现这里混淆了ng-container和ng-content。应在此处使用ng-content。该解决方案不允许在ng-content之间插入其他元素。只是作为一个占位符。使用ng-content后问题就消失了。这里我们可以使用单步调试来弄清楚投影内容是如何插入到ng-content占位符中的。选择app-zippy-basic，为其设置dom断点，类型为子树修改：先执行模板函数，渲染Component本身的h2元素，渲染HTML源码：接下来是Angular处理的关键整个内容投影逻辑：遇到ng-content时，调用函数??projection：改为调用applyProjection：父节点是指定义ng-content的Component对应的dom元素：rNode是插入到app-zippy-basic中的节点，即app-zippy-basic的消费者。消费语法：
在这里插入你想要投射到app-zippy-basic中的HTML源代码
