数据绑定Angular2动态创建组件

时间:2017-04-01 07:44:03

标签: angular typescript data-binding

我找到了动态创建子组件,将数据传递给它们并相应地渲染它们的代码。

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

但是,我不确定如何将子组件中的数据绑定到其父组件。在上面包含的Plunker中,我想要将{2}数据绑定到showNum ..任何想法?

1 个答案:

答案 0 :(得分:2)

我希望这就是你想要的。

现场演示:http://plnkr.co/edit/SPbo1Cw7mDadfLK3ElEC?p=preview

<强>的src /动态component.ts

org.springframework.web.filter.CommonsRequestLoggingFilter

<强>的src /你好-世界component.ts

DEBUG

<强>父

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);
    });

}

world-hello-component.ts 相同。