Angular：使用ContentChildren传递数据时二级嵌套组件失效问题

你遇到的核心问题是：ContainerComponent没有将自身的颜色值注册为依赖注入的提供者，导致ChildComponent会直接跳过它，向上找到最顶层的ParentComponent的颜色值。下面是完整的解决方案，一步步帮你实现层级隐式传值：

第一步：定义注入令牌 #

首先我们需要一个统一的注入令牌，用来在组件间传递颜色值，避免直接依赖组件类：

// color.token.ts
import { InjectionToken } from '@angular/core';

export const COLOR_TOKEN = new InjectionToken<string>('组件层级颜色令牌');

第二步：配置父组件（ParentComponent） #

父组件需要把自身的颜色值通过令牌暴露给子组件，同时保留ng-content插槽：

// parent.component.ts
import { Component } from '@angular/core';
import { COLOR_TOKEN } from './color.token';

@Component({
  selector: 'app-parent',
  template: `
    <div [style.color]="color">
      <!-- 父组件仅保留插槽 -->
      <ng-content></ng-content>
    </div>
  `,
  // 注册颜色令牌的提供者，将组件自身的color属性作为值
  providers: [
    {
      provide: COLOR_TOKEN,
      useFactory: (parent: ParentComponent) => parent.color,
      deps: [ParentComponent]
    }
  ]
})
export class ParentComponent {
  // 父组件设置的颜色值
  color = 'red';
}

第三步：配置容器组件（ContainerComponent） #

这是关键一步！Container需要同时做两件事：

1. 从父组件（Parent）获取颜色值
2. 将自身的颜色值（可以是继承或修改后的）注册为新的提供者，供子组件使用

// container.component.ts
import { Component, Inject, Optional, SkipSelf } from '@angular/core';
import { COLOR_TOKEN } from './color.token';

@Component({
  selector: 'app-container',
  template: `
    <div [style.color]="containerColor">
      <ng-content></ng-content>
    </div>
  `,
  // 必须注册自己的颜色提供者，否则子组件会直接找Parent的
  providers: [
    {
      provide: COLOR_TOKEN,
      useFactory: (container: ContainerComponent) => container.containerColor,
      deps: [ContainerComponent]
    }
  ]
})
export class ContainerComponent {
  containerColor: string;

  constructor(
    // 使用@SkipSelf()跳过自身的提供者，专门找父级的颜色值
    // @Optional()避免没有父级提供者时报错
    @Inject(COLOR_TOKEN) @SkipSelf() @Optional() private parentColor: string
  ) {
    // 这里可以直接使用父级颜色，也可以修改后使用
    this.containerColor = this.parentColor || 'blue';
  }
}

第四步：配置子组件（ChildComponent） #

子组件只需要直接注入令牌，就能拿到最近的父级（也就是Container）的颜色值：

// child.component.ts
import { Component, Inject } from '@angular/core';
import { COLOR_TOKEN } from './color.token';

@Component({
  selector: 'app-child',
  template: `<p>我是子组件，当前颜色来自Container：{{ color }}</p>`
})
export class ChildComponent {
  constructor(@Inject(COLOR_TOKEN) public color: string) {}
}

第五步：使用组件 #

在模板中嵌套使用即可：

<app-parent>
  <app-container>
    <app-child></app-child>
  </app-container>
</app-parent>

为什么之前的方案失效？ #

Angular的依赖注入系统会从当前组件开始，向上查找最近的提供者。如果Container没有注册自己的COLOR_TOKEN提供者，ChildComponent会直接跳过它，找到最顶层的ParentComponent的颜色值。通过给Container注册自己的提供者，我们在DI链中新增了一个节点，让Child能正确获取到Container的颜色。

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