如何通过CollapsibleComponent将ng-content传入CollapsibleActionsComponent

你遇到的问题核心是Angular的<ng-content>是一次性投影——当CollapsibleComponent通过<ng-content select="[slot=moreCustomActions]">把AppComponent里的内容"取走"后，这段内容就无法再被二次投影到CollapsibleActionsComponent的<ng-content>中，导致额外按钮无法显示。以下是保留两个独立组件的解决方案：

方案一：使用TemplateRef传递内容（推荐） #

通过模板引用的方式，把自定义内容打包后传递给嵌套组件，避开<ng-content>的一次性限制。

1. 修改CollapsibleComponent类 #

添加@ContentChild获取对应slot的模板引用：

import { Component, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-collapsible',
  templateUrl: './collapsible.component.html'
})
export class CollapsibleComponent {
  @ContentChild('moreCustomActions', { static: false }) 
  moreCustomActionsTemplate!: TemplateRef<any>;
}

2. 修改CollapsibleComponent模板 #

用ngTemplateOutlet渲染模板，替代原来的<ng-content>：

<div class="header">
  ...
 
  <app-collapsible-actions>
    <ng-container *ngTemplateOutlet="moreCustomActionsTemplate"></ng-container>
  </app-collapsible-actions>
</div>

<div class="body">
  <ng-content select="[slot=body]"></ng-content>
</div>

3. 修改AppComponent模板 #

给slot元素添加模板引用标记：

<app-collapsible>
  <div slot="moreCustomActions" #moreCustomActions>
    <button>Additional button</button>
  </div>

  <div slot="body">
    <p>...</p>
  </div>
</app-collapsible>

方案二：通过输入属性传递内容（适合简单场景） #

如果自定义内容结构简单，可以直接通过输入属性把模板传给CollapsibleActionsComponent。

1. 修改CollapsibleActionsComponent类 #

添加输入属性接收模板：

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

@Component({
  selector: 'app-collapsible-actions',
  templateUrl: './collapsible-actions.component.html'
})
export class CollapsibleActionsComponent {
  @Input() customActions!: TemplateRef<any>;
}

2. 修改CollapsibleActionsComponent模板 #

用ngTemplateOutlet渲染传入的模板：

<div class="actions">
  <ng-container *ngTemplateOutlet="customActions"></ng-container>
  <button>Common button</button>
</div>

3. 修改CollapsibleComponent模板 #

把获取到的模板通过输入属性传给子组件：

<div class="header">
  ...
 
  <app-collapsible-actions [customActions]="moreCustomActionsTemplate">
  </app-collapsible-actions>
</div>

<div class="body">
  <ng-content select="[slot=body]"></ng-content>
</div>

AppComponent的模板修改同方案一即可。

以上两种方法都能在保留组件独立性的前提下，实现自定义内容的嵌套投影，核心是用TemplateRef打破<ng-content>只能一次性投影的限制。

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