有没有办法如何从所有多个级别使用Angular多提供程序？

Question

我想知道是否有可能从(理想情况下)所有祖先获得角度多供应商.

让我们说我有一个INJECTION_TOKEN X,我有一个像这样的组件结构:

<comp-a>
    <comp-b>
       <comp-c></comp-c>
    <comp-b>
<comp-a>

comp-a 供应商: providers: {provide: X, useValue: "A", multi: true}

comp-b 供应商: providers: {provide: X, useValue: "B", multi: true}

有没有办法如何让["A", "B"]中comp-c,当我使用依赖注入,如:

constructor(@Inject(X) obtainedArray:TypeOfX[]) {
    console.log(obtainedArray.length); //Expected to be 2
}

我试图使用这个提供程序,comp-b但它正在抛出循环DI期望:

providers:[
    {provide: X, useExisting: X, multi: true}
    {provide: X, useValue: "B", multi: true}
]

Answer 1

如以下文章所述：

• 您一直想了解的有关Angular Dependency Injection树的知识

Angular通过使用原型继承将提供程序存储在element上。因此，不管您是否使用multi，都会得到以下对象，该对象包含当前元素上的所有提供程序：

如您所见，所有提供程序都在这里，但是由于angular仅使用方括号从元素中获取提供程序，因此您只会获得最近的提供程序。

要解决此问题，您可以使用使用工厂收集所有父提供程序的附加令牌：

import { Component, VERSION, InjectionToken, 
  Inject, SkipSelf, Optional } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <comp-a>
        <comp-b>
            <comp-c></comp-c>
        </comp-b>
    </comp-a>
  `
})
export class AppComponent { }

const X = new InjectionToken('X');

const XArray = new InjectionToken('XArray');

const XArrayProvider = {
  provide: XArray,
  useFactory: XFactory,
  deps: [X, [new SkipSelf(), new Optional(), XArray]]
};

export function XFactory(x: any, arr: any[]) {
  return arr ? [x, ...arr] : [x];
}

@Component({
  selector: 'comp-a',
  template: `<ng-content></ng-content>`,
  providers: [
    { provide: X, useValue: "A" },
    XArrayProvider
  ]
})
export class CompA { }


@Component({
  selector: 'comp-b',
  template: `<ng-content></ng-content>`,
  providers: [
    { provide: X, useValue: "B" },
    XArrayProvider
  ]
})
export class CompB { }


@Component({
  selector: 'comp-c',
  template: `{{ tokens }}`
})
export class CompC {
  constructor( @Inject(XArray) public tokens: any[]) { }
}

Ng运行示例