Angular中ng-content搭配*ngTemplateOutlet时子组件模板未在DOM显示问题

问题原因 #

核心错误为模板引用名拼写不匹配：

• child2组件内定义的模板引用变量为#child2Template
• 但在base.component.html中调用child2模板时，错误写为wrapper_child2.child1Template，该属性在child2组件中不存在，ngTemplateOutlet无法匹配到合法模板，因此仅渲染Angular默认的绑定占位注释。

修复方案 #

无需调整现有组件结构，也不会新增额外HTML标签，仅修改base.component.html中对应行的模板引用名即可：

<!-- base.component.html 修改前 -->
<ng-content *ngTemplateOutlet="wrapper_child2.child1Template"></ng-content>

<!-- base.component.html 修改后 -->
<ng-content *ngTemplateOutlet="wrapper_child2.child2Template"></ng-content>

额外注意事项 #

• 若要进一步优化渲染性能，可将<ng-content>替换为<ng-container>，二者均不会生成额外DOM节点，符合你无新增标签的要求。
• 后续新增同类子组件时，注意核对模板引用变量名的一致性，避免同类拼写错误。

内容的提问来源于stack exchange，提问作者Edo2610