Angular2：ComponentFactoryResolverを介して作成されたコンポーネントからデータを取得

Question

私は各カラムにフィルタを追加することで拡張したいグリッドコンポーネントを持っています。実際には、単純なテキスト入力、オプションフィルタ、日付範囲フィルタなど、各列に異なるフィルタタイプがあります。現在、フィルタファクトリを作成したいと考えています。私はフィルタタイプをパスし、必要なフィルタコンポーネントを取得したいだけです。私はこれに従っていたguideとこれまで私が持っているものです。

工場コンポーネント：

import { 
    Component, Input, Inject, ViewContainerRef, ViewChild, ReflectiveInjector, ComponentFactoryResolver 
} from '@angular/core'; 
import mod = require('../../env-bootstrap'); 
import {OptionsFilter} from "./options/options.filter"; 
import {BlankFilter} from "./blank/blank.filter"; 

@Component(mod.check({ 
    selector: 'filters-factory', 
    moduleId: module.id, 
    entryComponents: [OptionsFilter, BlankFilter], 
    template: '<div #dynamicComponentContainer></div>' 
})) 

export class FiltersFactory { 
    constructor(@Inject(ComponentFactoryResolver) private resolver: ComponentFactoryResolver) {} 
    currentComponent = null; 

    @ViewChild('dynamicComponentContainer', {read: ViewContainerRef}) dynamicComponentContainer: ViewContainerRef; 

    @Input() set componentData(data: {componentName: any, inputs: any }) { 
     if (! data) { 
      return; 
     } 

     switch (data.componentName) { 
      case 'name': 
       component = OptionsFilter; 
       break; 
      default: 
       component = BlankFilter; 
     } 

     // Inputs need to be in the following format to be resolved properly 
     let inputProviders = Object.keys(data.inputs).map((inputName) => { 
      return {provide: inputName, useValue: data.inputs[inputName]}; 
     }); 
     let resolvedInputs = ReflectiveInjector.resolve(inputProviders); 

     // We create an injector out of the data we want to pass down and this components injector 
     let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicComponentContainer.parentInjector); 

     // We create a factory out of the component we want to create 
     let factory = this.resolver.resolveComponentFactory(component); 

     // We create the component using the factory and the injector 
     let component = factory.create(injector); 

     // We insert the component into the dom container 
     this.dynamicComponentContainer.insert(component.hostView); 

     // Destroy the previously created component 
     if (this.currentComponent) { 
      this.currentComponent.destroy(); 
     } 

     this.currentComponent = component; 
    } 
} 

そして、私のOptionsFilterコンポーネント：ここ

import {Component, Injector, Inject, Output, EventEmitter } from '@angular/core'; 
import mod = require('../../../env-bootstrap'); 

@Component(mod.check({ 
    selector: 'options-filter', 
    moduleId: module.id, 
    styleUrls: 'share/filters/options/options.css', 
    templateUrl: 'share/filters/options/options.html' 
})) 

export class OptionsFilter { 
    showNum = 0; 
    constructor(@Inject(Injector) private injector: Injector) { 
     this.showNum = this.injector.get('showNum'); 
    } 

    @Output() filterValue = new EventEmitter(); 

    private onChange(option) { 
     this.filterValue.emit(option); 
    } 
} 

が、私は私のグリッドに

<td *ngFor="let columnName of columnNames"> 
    <filters-factory [componentData]="{ componentName: columnName ,inputs: { showNum: 9} }"></filters-factory> 
</td> 

そして、私のFilterOptionsテンプレートを工場出荷時のコンポーネントを追加している方法です

<select (change)="onChange($event)"> 
    <option disabled>Options</option> 
    <option>33</option> 
    <option>33</option> 
</select> 

私の今の主な目的は、からタグのファクトリコンポーネントへのoptionの値のパスです。出来ますか？ FiltersFactoryで

Answer 1

あなたが現在あなたが唯一の@Output()を持って、OptionsFilterで財産optionを必要とする。このために

console.log(this.currentComponent.instance.option); 

を使用して、動的コンポーネントのフィールドにアクセスすることができます。

動的に追加されたコンポーネントでバインディングを使用することはできないため、@Input()と@Output()は無意味です。私は `option`を置く場所

あなたはまた、いつも私が理解できないhttps://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service