Angular Multi Provider 依赖顺序

Posted 2023-02-19

【中文标题】Angular Multi Provider 依赖顺序

【英文标题】：Angular Multi Provider dependency order

【发布时间】：2017-01-07 08:36:58

【问题描述】：

Angular DI Multi Provider 机制是否保证某种顺序？

例子：

const TOKEN: OpaqueToken = new OpaqueToken('token');

@Injectable() 
class MyService (@Inject(TOKEN) deps: any[]) /* What is order of deps? */

@NgModule (
  providers: [ 
    provide: TOKEN, multi: true, useValue: 1,
    provide: TOKEN, multi: true, useValue: 2,
    provide: TOKEN, multi: true, useValue: 3,
    MyService
)
class MyModule 

【问题讨论】：

应该是它们的添加顺序，但我不知道保证。您可以提供一个数组而不是 multi: true 以按定义的顺序获取值。

@GünterZöchbauer 在这个简单的示例中，您可以注入这些值的数组，但在更复杂的情况下，如果我想注入一些依赖于其他事物的类，它将无法工作

我明白了。抱歉，没有更好的主意。

blog.thoughtram.io/angular2/2015/11/23/… 可能会有所帮助...看起来只有最后一个存在...！此外，如本博客所述，多提供者也不能与普通提供者混合。这是有道理的，因为我们要么扩展或覆盖令牌的提供者。

我有同样的问题，在这里创建了一个问题，因为我找不到文档：github.com/angular/angular/issues/23059

【参考方案1】：

如果你需要在组件 X 中注入类 A，例如，它依赖于其他类，最好的方法是在类 A 中注入这些类。在组件 X 中，你仍然需要声明所有服务。例如： 组件 X：

import  Component  from '@angular/core';

import 
  CarService, CarService2, CarService3,
  EngineService, EngineService2, TiresService
 from './car.services';

car.services.ts

import  Injectable  from '@angular/core';

/// Model ///
export class Car 


export class Engine 


export class Tires 


//// Engine services ///
@Injectable()
export class EngineService 


@Injectable()
export class EngineService2 


//// Tire services ///
@Injectable()
export class TiresService 


/// Car Services ///
@Injectable()
export class CarService 
  id = 'C1';
  constructor(
    protected engineService: EngineService,
    protected tiresService: TiresService)  


@Injectable()
export class CarService2 extends CarService 
  id = 'C2';
  constructor(
    protected engineService: EngineService,
    protected tiresService: TiresService) 
    super(engineService, tiresService);
  


@Injectable()
export class CarService3 extends CarService2 
  id = 'C3';
  constructor(
    protected engineService: EngineService,
    protected tiresService: TiresService) 
    super(engineService, tiresService);
  

https://stackblitz.com/angular/vomexgeqgdj?file=src%2Fapp%2Fcar.services.ts