Angular 2+：如何在组件树中为直接子组件多提供同令牌值？

你提到的需求完全可以通过Angular的多提供者（multi provider）正确配置来实现，之前的问题大概率是因为没有在每个组件的提供者配置里正确启用multi: true。另外还有一种更轻量化的方式，不需要依赖数组注入，直接通过Injector获取父级的令牌值，我会把两种方案都详细说明：

方案一：使用多提供者（Multi Provider）实现层级值收集 #

这种方案完全符合你最初的预期——注入一个数组，数组的元素顺序从根组件到当前组件依次排列，最后一个元素就是当前组件提供的值，前一个则是父组件的。

步骤1：定义多令牌 #

首先需要创建一个支持多值注入的InjectionToken：

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

// 定义令牌，可选设置默认工厂返回空数组
export const MULTI_TOKEN = new InjectionToken<string[]>('MultiToken', {
  factory: () => []
});

步骤2：在组件层级中配置多提供者 #

每个需要提供令牌值的组件，都要在providers数组里配置该令牌，并设置multi: true——这个配置是关键，它告诉Angular不要覆盖之前的注入值，而是将当前值追加到数组中：

父组件示例

import { Component, Inject } from '@angular/core';
import { MULTI_TOKEN } from './tokens';

@Component({
  selector: 'app-parent',
  template: `<app-child></app-child>`,
  providers: [
    { provide: MULTI_TOKEN, useValue: '父组件提供的值', multi: true }
  ]
})
export class ParentComponent {
  constructor(@Inject(MULTI_TOKEN) private allValues: string[]) {
    // 这里输出：['父组件提供的值']
    console.log('父组件拿到的所有值：', this.allValues);
  }
}

子组件示例

import { Component, Inject } from '@angular/core';
import { MULTI_TOKEN } from './tokens';

@Component({
  selector: 'app-child',
  template: `<app-grandchild></app-grandchild>`,
  providers: [
    { provide: MULTI_TOKEN, useValue: '子组件提供的值', multi: true }
  ]
})
export class ChildComponent {
  constructor(@Inject(MULTI_TOKEN) private allValues: string[]) {
    // 这里输出：['父组件提供的值', '子组件提供的值']
    console.log('子组件拿到的所有值：', this.allValues);
    
    // 获取父组件的值：取数组倒数第二个元素
    const parentValue = this.allValues[this.allValues.length - 2];
    // 获取当前组件的值：取数组最后一个元素
    const currentValue = this.allValues.at(-1);
    
    console.log('父级值：', parentValue);
    console.log('当前值：', currentValue);
  }
}

关键说明 #

• 只要每个层级的组件都配置了multi: true，Angular就会自动把所有层级的令牌值收集到数组中，顺序是从根到当前组件。
• 如果是根组件，数组就只有一个元素（自己提供的值），完全符合你的预期。

方案二：通过Injector获取父级令牌值（无需多提供者） #

如果你只需要获取当前组件和父组件的令牌值，不需要收集所有层级，那么可以用Injector的get方法，通过skipSelf选项跳过当前组件的注入，直接获取父级的令牌值：

import { Component, Injector, Inject } from '@angular/core';
import { MY_TOKEN } from './tokens';

@Component({
  selector: 'app-child',
  providers: [
    { provide: MY_TOKEN, useValue: '子组件提供的值' }
  ]
})
export class ChildComponent {
  constructor(private injector: Injector) {
    // 跳过当前组件，获取父级的令牌值
    const parentValue = this.injector.get(MY_TOKEN, '无父级值', { skipSelf: true });
    // 获取当前组件的令牌值
    const currentValue = this.injector.get(MY_TOKEN);
    
    console.log('父级值：', parentValue);
    console.log('当前值：', currentValue);
  }
}

这种方案更轻量化，不需要维护数组，适合只关心直接父级的场景。

为什么你之前的多提供者没生效？ #

大概率是你没有在每个组件的提供者配置里都设置multi: true——如果只有父组件设置了multi: true，而子组件没设置，那么子组件的提供者会覆盖父级的值，导致数组丢失之前的元素。必须确保所有提供该令牌值的组件都启用multi: true。

内容的提问来源于stack exchange，提问作者Tamás Kovács