@Input（）に基づく角度2の動的依存性注入

Question

コンポーネントが@Input（）によって決定される注入された依存関係を必要とするAngular 2のコンポーネントディレクティブがあるとします。

<trendy-directive use="'serviceA'">のようなものを書いて、TrendyDirectiveのインスタンスにserviceAを使用させたいのですが、それが指定している場合はserviceBを使用してもらいたいと思います。 （これは私が実際に何をしようとしているの単純化しすぎたバージョンである）

は（あなたは、これがそもそもひどいアイデアだと思うならば、私はそのフィードバックに開いたんだけど、理由を説明してください。）

私が考えていることを達成する方法の一例です。この例では、ServiceAとServiceBが、両方とも 'SuperCoolFunction'を持つことでiServiceを実装するインジェクタブルであるとします。

@Component({ 
    selector: 'trendy-directive', 
    ... 
}) 
export class TrendyDirective implements OnInit { 
    constructor(
     private serviceA: ServiceA, 
     private serviceB: ServiceB){} 

    private service: iService; 
    @Input() use: string; 

    ngOnInit() { 
     switch (this.use){ 
      case: 'serviceA': this.service = this.serviceA; break; 
      case: 'serviceB': this.service = this.serviceB; break; 
      default: throw "There's no such thing as a " + this.use + '!'; 
     } 
     this.service.superCoolFunction(); 
    } 
} 

私は、これは技術的に働くだろうと思うが、動的な依存性の注入を行うには良い方法があるように持っています。

Answer 1

これは、@角度/コアモジュールに注入するというサービスがあります

// can be a service also for overriding and testing 
export const trendyServiceMap = { 
    serviceA: ServiceA, 
    serviceB: ServiceB 
} 

constructor(private injector: Injector) {}  
... 
ngOnInit() { 
    if (trendyServiceMap.hasOwnProperty(this.use)) { 
     this.service = this.injector.get<any>(trendyServiceMap[this.use]); 
    } else { 
     throw new Error(`There's no such thing as '${this.use}'`); 
    } 
} 

Answer 2

です。 @Injectを使用すると、別の方法で注入することができます。しかし、それはコンストラクタでのみ行うことができます。

したがって、コンポーネントの入力を@componentデコレータのinputs配列に入れ（クラス内で@Inputデコレータを使用しないでください）、その入力変数をコンストラクタに挿入する必要があります。一般的に

Answer 3

、同じアプローチがAngular2のマニュアルに記載されていますInjectorComponent

@Component({ 
    providers: [Car, Engine, Tires, heroServiceProvider, Logger] 
}) 
export class InjectorComponent { 
    car: Car = this.injector.get(Car); 
    heroService: HeroService = this.injector.get(HeroService); 
    hero: Hero = this.heroService.getHeroes()[0]; 

    constructor(private injector: Injector) { } 
} 

あなたは、コンストラクタでInjectorを注入し、@Component注釈のprovidersプロパティですべてのサービスをリストする必要があります。次にinjector.get(type)と入力してください。@Inputからtypeが解決されます。ドキュメントごとに、Serviceはあなたがそれを求めるまで実際には注入されません（.get()）。