Angular如何通过中间组件将ng-content传递给孙组件？

你当前的代码无法让b-component接收到main.component传入的<item>ITEM 1</item>，核心原因是：ng-content是投影占位符，它仅负责将父组件（main.component）的内容渲染到当前组件（a-component）的指定位置，但这些内容的DOM归属仍属于main.component，并非a-component的子元素，因此b-component的ng-content无法捕获到这部分内容。

以下是两种可行的解决方案：

方案1：使用模板引用转发内容（推荐，支持复杂结构） #

这种方式通过将投影内容封装为模板，再传递给孙组件，能完整保留原内容的结构和Angular指令绑定。

步骤1：修改a.component.html #

将main.component传入的内容捕获到模板中，再将模板作为输入属性传递给b-component：

<!-- 用ng-template捕获main组件传入的item内容 -->
<ng-template #mainItems>
  <ng-content select="item"></ng-content>
</ng-template>

<!-- 传递模板给b-component，同时保留自身的item内容 -->
<b-component [externalItems]="mainItems">
  <item>ITEM 2</item>
</b-component>

步骤2：修改b.component.ts #

添加输入属性接收外部模板：

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

@Component({
  selector: 'b-component',
  templateUrl: './b.component.html'
})
export class BComponent {
  @Input() externalItems?: TemplateRef<any>;
}

步骤3：修改b.component.html #

渲染外部传递的模板内容，再渲染自身的投影内容：

<!-- 渲染来自main.component的内容 -->
<ng-container *ngTemplateOutlet="externalItems"></ng-container>

<!-- 渲染来自a.component的内容 -->
<ng-content select="item"></ng-content>

方案2：使用内容查询转发文本内容（适合简单场景） #

如果item仅包含纯文本，可通过内容查询获取文本内容后传递给孙组件。

步骤1：修改a.component.ts #

通过@ContentChild获取投影的item元素，提取其文本内容：

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

@Component({
  selector: 'a-component',
  templateUrl: './a.component.html'
})
export class AComponent implements AfterContentInit {
  @ContentChild('mainItem') mainItemRef?: ElementRef<HTMLElement>;
  mainItemText?: string;

  ngAfterContentInit(): void {
    if (this.mainItemRef) {
      this.mainItemText = this.mainItemRef.nativeElement.textContent?.trim();
    }
  }
}

步骤2：修改a.component.html #

给投影的item添加模板引用，并传递文本内容给b-component：

<b-component [mainItemText]="mainItemText">
  <item>ITEM 2</item>
</b-component>

<!-- 捕获main传入的item，添加模板引用 -->
<ng-content select="item" #mainItem></ng-content>

步骤3：修改b.component.ts #

添加输入属性接收文本内容：

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

@Component({
  selector: 'b-component',
  templateUrl: './b.component.html'
})
export class BComponent {
  @Input() mainItemText?: string;
}

步骤4：修改b.component.html #

渲染传入的文本和自身的投影内容：

<item *ngIf="mainItemText">{{ mainItemText }}</item>
<ng-content select="item"></ng-content>

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