데이터 바인딩 Angular2 동적으로 생성 된 구성 요소

Question

동적으로 하위 구성 요소를 만들고 데이터를 전달한 다음 적절하게 렌더링하는 코드를 발견했습니다.

http://plnkr.co/edit/wwHEZkbvKmNVF0Snr2ZB?p=preview

그러나, 나는 부모에게 자식 요소에서 데이터를 바인딩하는 방법을 모르겠어요. 위에서 포함 된 Plunker에서 나는 양방향 데이터 바인딩을 showNum에 바인딩하고 싶습니다. 어떤 생각입니까?

Answer 1

희망 사항입니다.

라이브 데모 : http://plnkr.co/edit/SPbo1Cw7mDadfLK3ElEC?p=preview

SRC/동적 component.ts

import 'rxjs/Rx'; 

export default class DynamicComponent { 

myData:any; 
@Input() set componentData(data: {component: any, inputs: any }) { 
    ... 
    this.myData=data; //assinging parent data object to myData object. 
    ... 
    ... 
    component.instance.showNum=this.myData.inputs.showNum   
    //component.instance.someNumber syntax allows you to pass varible to dynamically created component 

    //here, I'm using subject from rxjs and subscribing to it as below 
    component.instance.emitNumber$.subscribe(v=>{ 
     console.log('getting'+ v); 
     console.log(this.myData); 
     this.myData.inputs.showNum=v; //assigning subscribed value back to parent object 
     console.log(this.myData); 
    }); 

} 

SRC/안녕하세요 - 세계 component.ts

import {Observable,Subject} 'rxjs/Rx'; 

@Component({ 
    selector: 'hello-world', 
    template: ` 
    ... 
    <input [(ngModel)]="showNum" (keyup)="updateValue(showNum)" type="text"> 
    `, 

    export default class HelloWorldComponent { 

    @Input() showNum:number; 
    emitNumber=new Subject<number>();   //using rxjs subject 
    emitNumber$=this.emitNumber.asObservable(); 

    updateValue(val){ 
     this.emitNumber.next(val);    //emitting value back to dyanmic component 
    } 

    } 

}) 

부모 세계 안녕하세요 - component.ts와 같은

<div *ngFor="let x of components">showNum of parent: {{x.inputs.showNum}}<br></div> 

.