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 값을 OptionsFilter 태그에서 출하시 구성 요소로 전달하는 것입니다. 가능한가? 이 내용은

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

사용하여 동적 구성 요소의 필드에 액세스 할 수 있습니다 FiltersFactory에서

는

Answer 1

당신은 현재 당신이 단지 @Output()이, OptionsFilter에 속성 option이 필요합니다.

동적으로 추가 된 구성 요소에는 바인딩을 사용할 수 없으므로 @Input() 및 @Output()은 의미가 없습니다. 나는`option`를 배치해야하는 위치

당신은 또한 항상 내가 이해할 수없는 https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service