Angular v16中ng-content的使用方法：新组件写法下的实现

首先明确：Angular v16 新增的组件自闭合写法（<app-component />）仅适用于不需要传递插槽内容的场景，若要使用 <ng-content> 接收外部传入的内容，依然需要使用组件的闭合标签形式，具体用法如下：

1. 组件内部声明插槽 #

在你的 app-component 模板中，照旧保留 <ng-content> 标签定义插槽，和旧版本完全一致：

<!-- app-component.component.html -->
<div class="custom-component">
  <h2>组件标题</h2>
  <ng-content></ng-content> <!-- 默认插槽 -->
  <!-- 也支持定义具名插槽 -->
  <ng-content select="[footer]"></ng-content>
</div>

2. 使用组件并传递插槽内容 #

当需要给组件传递内容到 <ng-content> 时，必须用闭合标签写法包裹内容，和旧版本的使用逻辑没有区别：

<!-- 父组件模板 -->
<app-component>
  <!-- 默认插槽内容 -->
  <p>这是传入到默认插槽的文本</p>
  <button>操作按钮</button>

  <!-- 具名插槽内容 -->
  <div footer>
    这是页脚插槽的内容
  </div>
</app-component>

3. 自闭合标签的适用场景 #

只有当组件不需要接收任何外部插槽内容时，才适合用自闭合写法 <app-component />，比如组件所有内容都是内部逻辑生成的，不需要外部传入内容：

<!-- 无插槽需求时的自闭合写法 -->
<app-component />

总结：Angular v16 的自闭合组件标签只是语法简化，插槽功能的核心逻辑没有变化，传递内容给 <ng-content> 仍需依赖闭合标签的包裹能力。

内容的提问来源于stack exchange，提问作者Don Delice Dushime