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

发布时间：2020-12-17 10:25:27 所属栏目：安全来源：网络整理

导读：我想知道是否有可能从(理想情况下)所有祖先获得角度多供应商. 让我们说我有一个INJECTION_TOKEN X,我有一个像这样的组件结构： comp-a comp-b comp-c/comp-c comp-bcomp-a comp-a提供者：提供者：{提供：X,useValue：“A”,multi：true} comp-b提供者：提

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

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

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

comp-a提供者：
提供者：{提供：X,useValue：“A”,multi：true}

comp-b提供者：
提供者：{提供：X,useValue：“B”,multi：true}

当我使用依赖注入时,有没有办法在comp-c中获得[“A”,“B”],如：

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}
]

如下文所述：

> What you always wanted to know about Angular Dependency Injection tree

Angular通过使用原型继承来存储元素的提供者.所以,不管你是否使用multi,你将获得包含当前元素上所有提供者的以下对象：

正如您所看到的所有提供商都在这里,但是从角度到uses square brackets,从元素获得提供者,您将只获得最近的提供者.

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

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',useValue: "B" },XArrayProvider
  ]
})
export class CompB { }


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

Ng-run Example

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!