Angular多层内容投影是否可行？嵌套插槽投影实现疑问

Angular完全支持嵌套内容投影，你不需要调整整体实现思路，只要按照正确的方式定义和使用插槽即可。

具体实现步骤 #

• 第一步：定义外层多插槽组件

// outer.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-outer',
  template: `
    <div class="outer-box">
      <h2>外层组件</h2>
      <!-- 主插槽，用于放置内层带投影的组件 -->
      <ng-content select="[main-slot]"></ng-content>
      <!-- 其他插槽 -->
      <ng-content select="[extra-slot]"></ng-content>
    </div>
  `
})
export class OuterComponent {}

• 第二步：定义内层带插槽的组件

// inner.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-inner',
  template: `
    <div class="inner-box">
      <h3>内层组件</h3>
      <!-- 内层自定义插槽 -->
      <ng-content select="[inner-slot]"></ng-content>
    </div>
  `
})
export class InnerComponent {}

• 第三步：在父组件中嵌套使用并传递多层投影内容

<!-- parent.component.html -->
<app-outer>
  <!-- 外层主插槽嵌套内层组件 -->
  <app-inner main-slot>
    <!-- 内层插槽的内容 -->
    <p inner-slot>这是嵌套在第二层的投影内容</p>
  </app-inner>
  <!-- 外层其他插槽内容 -->
  <p extra-slot>这是外层额外插槽的内容</p>
</app-outer>

进阶灵活方案（用模板传递内容） #

如果需要更灵活的内容传递，也可以结合ng-template和ngTemplateOutlet实现：

1. 父组件定义模板：

<ng-template #nestedContent>
  <p>通过模板传递的嵌套投影内容</p>
</ng-template>

2. 内层组件接收模板并渲染：

// inner.component.ts
import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-inner',
  template: `
    <div class="inner-box">
      <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
    </div>
  `
})
export class InnerComponent {
  @Input() contentTemplate!: TemplateRef<any>;
}

3. 父组件使用：

<app-outer>
  <app-inner main-slot [contentTemplate]="nestedContent"></app-inner>
</app-outer>

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