Angular如何将父组件多服务实例传给对应子组件？

嘿，你这个需求其实Angular的依赖注入系统完全支持，而且你已经找对了核心方向——用自定义令牌来区分同一服务的不同实例！下面我给你一步步讲清楚怎么落地：

第一步：父组件中配置多实例服务 #

你已经在ParentComponent的providers数组里用字符串令牌区分了两个ElementService实例，这一步是对的，再明确下代码写法：

import { Component } from '@angular/core';
import { ElementService } from './element.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  // 在这里配置两个不同令牌的服务实例
  providers: [
    { provide: 'instance1', useClass: ElementService },
    { provide: 'instance2', useClass: ElementService }
  ]
})
export class ParentComponent {}

第二步：子组件中注入对应实例 #

因为我们用了自定义的字符串令牌，不能直接通过ElementService类型来注入（那样Angular不知道该拿哪个实例），所以要结合@Inject()装饰器指定对应的令牌：

Child1Component 注入 instance1 #

import { Component, Inject } from '@angular/core';
import { ElementService } from './element.service';

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html'
})
export class Child1Component {
  // 通过@Inject('instance1')指定要注入的实例
  constructor(@Inject('instance1') private elementService: ElementService) {
    // 这里使用的就是父组件提供的instance1实例啦
  }
}

Child2Component 注入 instance2 #

同理，只需要把令牌换成'instance2'就行：

import { Component, Inject } from '@angular/core';
import { ElementService } from './element.service';

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html'
})
export class Child2Component {
  constructor(@Inject('instance2') private elementService: ElementService) {
    // 这里使用的就是instance2实例
  }
}

额外优化：用InjectionToken提升类型安全性 #

虽然字符串令牌简单，但容易出现拼写错误（比如把'instance1'写成'instance11'），推荐用Angular的InjectionToken来替代，更严谨：

1. 先定义令牌（可以单独建一个token文件，或者放在服务文件里）：

import { InjectionToken } from '@angular/core';
import { ElementService } from './element.service';

// 定义类型安全的注入令牌
export const ELEMENT_SERVICE_INSTANCE1 = new InjectionToken<ElementService>('instance1');
export const ELEMENT_SERVICE_INSTANCE2 = new InjectionToken<ElementService>('instance2');

2. 父组件的providers更新为：

providers: [
  { provide: ELEMENT_SERVICE_INSTANCE1, useClass: ElementService },
  { provide: ELEMENT_SERVICE_INSTANCE2, useClass: ElementService }
]

3. 子组件注入时使用令牌：

// Child1Component
constructor(@Inject(ELEMENT_SERVICE_INSTANCE1) private elementService: ElementService) {}

// Child2Component
constructor(@Inject(ELEMENT_SERVICE_INSTANCE2) private elementService: ElementService) {}

这样一来，拼写错误会在编译阶段就被发现，比字符串令牌更可靠。

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