Angular封装第三方组件时如何传递ng-content选择插槽？

问题背景 #

在Angular项目中重复使用某第三方组件时，为简化使用流程、统一设置默认属性，需要将其封装为自定义组件。但第三方组件使用了带select选择器的ng-content命名插槽（如[head]、[body]），直接在封装组件中使用<ng-content />无法将外层传入的指定插槽内容传递给第三方组件，导致插槽内容无法正确渲染。

可行方案 #

在自定义封装组件的模板中，为第三方组件的每个命名插槽分别添加对应select规则的ng-content，同时保留默认插槽的内容转发，实现完整的内容投影传递。

修改后的封装组件代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-wrapper-card',
  template: `
    <third-party-card someattribute="defaultvalue1" someattribute2="defaultvalue2">
      <!-- 转发第三方组件的head插槽内容 -->
      <ng-content select="[head]" />
      <!-- 转发第三方组件的body插槽内容 -->
      <ng-content select="[body]" />
      <!-- 转发默认插槽的剩余内容 -->
      <ng-content />
    </third-party-card>
  `,
})
export class WrapperComponent {
  constructor() {}
}

核心原理 #

Angular的内容投影是基于模板层级的匹配机制：

• 当外部向app-wrapper-card传入带有head/body属性的元素时，封装组件内对应select规则的ng-content会精准捕获这些元素，并将它们投影到内部third-party-card的对应插槽位置
• 无属性的默认内容则通过<ng-content />传递到第三方组件的默认插槽

修改完成后，使用app-wrapper-card的效果将与直接使用third-party-card完全一致，同时还能保留自定义组件预设的默认属性。

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