Angular嵌套组件未渲染求助：内部组件无法显示

问题场景 #

将<app-successalert>嵌套在<app-server>标签内时，内部组件无法渲染；单独使用<app-successalert>可正常显示，控制台无报错，所有组件已在app.module.ts中声明。

相关代码 #

servers.component.html

<app-server>
    <app-successalert></app-successalert>
</app-server>

server.component.html

<h3>Server Component</h3>

原因解析 #

这是Angular内容投影机制导致的：当你在组件标签内部嵌套其他内容（比如这里的<app-successalert>），这些内容并不会自动渲染，除非父组件（app-server）的模板中通过<ng-content>标签明确声明要接收并展示这些投影内容。当前server.component.html里没有<ng-content>，所以Angular会直接忽略嵌套的<app-successalert>。

解决方法 #

修改server.component.html，添加<ng-content>标签来接收投影内容，示例：

<h3>Server Component</h3>
<ng-content></ng-content> <!-- 此处会渲染嵌套进来的内容 -->

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