同じ基本コンポーネントを再利用する場合の角度2依存性注入

Question

角度2（rc6）で同じ基本コンポーネントを再利用する場合、基本コンポーネントを拡張するすべてのコンストラクタで同じ依存宣言を使用する必要があります。なぜなら、常に同じ依存関係宣言を注入しようとするからです（私はそれが基本コンポーネントを拡張する最後にインポートされたコンポーネントだと思います）。

例えば、Iベース成分 "AnimalComponent" を有する：

@Component({ 
    selector: '#animalComponent', 
    template: `I'm a animal component` 
}) 
export class AnimalComponent 
{ 
    constructor(
     @Inject('AnimalData') protected _data: any 
    ) {} 
} 

を私が "CatComponent" 二つの成分にベースコンポーネントを拡張し、 "DogComponent"

@Component({ 
    selector: '#catComponent', 
    template: `I'm a cat component` 
}) 
export class CatComponent extends AnimalComponent 
{ 
    constructor(
     @Inject('CatData') data: any 
    ) { 
     super(
      data 
     ); 
    } 
} 


@Component({ 
    selector: '#dogComponent', 
    template: `I'm a dog component` 
}) 
export class DogComponent extends AnimalComponent 
{ 
    constructor(
     @Inject('DogData') data: any 
    ) { 
     super(
      data 
     ); 
    } 
} 

、私は両方をラップモジュール内のコンポーネントなので、実行時にロードすることができます。

@NgModule({ 
    imports: [CommonModule], 
    declarations: [CatComponent], 
    exports: [CatComponent] 
}) 
export class CatModule {} 


@NgModule({ 
    imports: [CommonModule], 
    declarations: [DogComponent], 
    exports: [DogComponent] 
}) 
export class DogModule {} 

最後に、t試みは「DogComponent」の依存性注入を解決するとき、彼は、このダミーの場合には、私の最後のコンポーネント

import {DogModule} from './dog.module'; 
import {CatModule} from './cat.module'; 

@Component({ 
    selector: '#mainComponent', 
    template: ` 
     I'm a main component 
     <template #catComponent></template> 
     <template #dogComponent></template> 
    ` 
}) 
export class MainComponent 
{ 
    @ViewChild('catComponent', {read: ViewContainerRef}) catView: ViewContainerRef; 
    @ViewChild('dogComponent', {read: ViewContainerRef}) dogView: ViewContainerRef; 

    constructor(
     protected _injector: Injector, 
     protected _compiler: Compiler 
    ) { 
     let catInjector = ReflectiveInjector.fromResolvedProviders(
      ReflectiveInjector.resolve({provide: 'CatData', useValue: 'Some cat information'}), 
      this._injector 
     ); 

     this._compiler.compileModuleAndAllComponentsAsync(CatModule).then(
      moduleFactory => { 
       let compFactory = moduleFactory.componentFactories.find(tmpCompFactory => tmpCompFactory.componentType.name === 'CatComponent'); 
       let componentRef = this.catView.createComponent(compFactory, 0, catInjector, []); 
      } 
     ); 

     let dogInjector = ReflectiveInjector.fromResolvedProviders(
      ReflectiveInjector.resolve({provide: 'DogData', useValue: 'Some dog information'}), 
      this._injector 
     ); 

     this._compiler.compileModuleAndAllComponentsAsync(DogModule).then(
      moduleFactory => { 
       let compFactory = moduleFactory.componentFactories.find(tmpCompFactory => tmpCompFactory.componentType.name === 'DogComponent'); 
       let componentRef = this.dogView.createComponent(compFactory, 0, dogInjector, []); 
      } 
     ); 
    } 
} 

に2つのコンポーネントは、コンポーネントの注射は、メッセージの聖霊降臨祭分割されます：「！CatDataなしのプロバイダを」しかし、同じ名前（ "CatData"と "DogData"ではなく "AnyAnimalData"）の両方のプロバイダの名前を変更すると、すべて正常に動作します。

他にも同じ問題がありますか？私は何か間違っているのですか？

Answer 1

今日、私はangular2バージョンを最新の2.0.1にアップデートしましたが、残念ながら問題は解決しません。同じ基本コンポーネントを複数回再利用するために、このような角度注入の問題を回避するために、私は誰かにとって有用な場合に私の解決策を残しました。

1-「[my-component] .extension-component.ts」に拡張して名前を変更できるコンポーネントのコピーを作成し、すべての変数をコンストラクタから宣言し、コンストラクタの名前を「init」に変更します、initメソッドではすべての変数をパラメータとして受け取り、それぞれを対応する宣言された変数に割り当てます。

@Component({ 
    selector: 'myComponent', 
    template: '' 
}) 
export abstract class MyComponentExtensionComponent 
{ 
    // Contructor vars 
    protected _var1: type1; 
    protected _var2: type2; 
    protected _varN: typeN; 

    // Local vars 
    protected _varZ: typeZ; 

    /** 
    * Initialization of component (replace the original constructor to avoid angular injection inheritance problem) 
    * @param var1 
    * @param var2 
    * @param varN 
    */ 
    public init(
     var1: type1, 
     var2: type2, 
     varN: typeN 
    ) { 
     // Constructor vars 
     this._var1 = var1; 
     this._var2 = var2; 
     this._varN = varN; 

     // Local vars 
     this._varZ = "I'm a var Z"; 
    } 

    //... 
} 

2 - 今、あなたはこのように何の問題もなく、このコンポーネントを複数回拡張できます

//... 
import {MyComponentExtensionComponent} from './my-component.extension-component'; 

//... 

export class MyChildComponent extends MyComponentExtensionComponent 
{ 
    constructor(
     var1: type1, 
     var2: type2, 
     varN: typeN 
    ) { 
     // Call parent 
     super(); 
     super.init(
      var1, 
      var2, 
      varN 
     ); 

     //...