Data binding Angular2：使用DynamicComponentLoader动态插入的组件上的双向数据绑定

我正在开发Angular2应用程序，我遇到了一个问题：

我有一组不同的对象，可以使用UI进行选择。每个对象都有一组可使用UI编辑的选项（不同对象的选项不同）。现在，我正在使用DynamicComponentLoader为当前选定的对象插入一个特定的组件，以便它能够正确地处理其选项。 问题是我不知道如何将当前选定对象的数据绑定到动态插入的选项组件

@Component({
  selector: 'dynamic',
  template: `<div>Options:</div>
             <div>Property1: <input type="number" /></div>
             <div>Property2: <input type="text" /></div>`
  // template: `<div>Options:</div>
  //           <div>Property1: <input type="number" [(ng-model)]="currentSelection.property1" /></div>
  //           <div>Property2: <input type="text" [(ng-model)]="currentSelection.property1" /></div>`
})
class DynamicComponent {

}


@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Selected: {{currentSelection.name}}!</h2>
      <div  #container></div>
    </div>
  `
})
class App {
  currentSelection = {name: 'Selection1', property1: 10, property2: 'test'};

  constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) {
    loader.loadIntoLocation(DynamicComponent, elementRef, 'container');
  }
}

@组件({
选择器：“动态”，
模板：`选项：
物业1：
物业2：`
//模板：`选项：
//物业1：
//物业2：`
})
类DynamicComponent{
}
@组成部分({
选择器：“我的应用程序”，
模板：`
已选择：{{currentSelection.name}！
`
})
类应用程序{
currentSelection={name:'Selection1'，property1:10，property2:'test'}；
构造函数（专用加载器：DynamicComponentLoader，专用elementRef:elementRef）{
loader.loadIntoLocation（DynamicComponent，elementRef，'container'）；
}
}

是一个帮助你理解我的问题的工具：

对于angular2和Rxjs，“几乎总是答案

如果我正确理解了您的问题，那么您需要将DynamicComponent设置为“”，将容器设置为“”，甚至更好（如果您的容器需要订阅另一个可观察对象以从中接收选择）。然后，在加载动态组件后，将其订阅到容器中

每当容器上的选择发生更改时，您都会将新选择推送到订阅者。这样，您可以加载多个动态组件，所有组件都将接收推送

容器：

class App {
  currentSelection = {};
  selections = [
    {name: 'Selection1', property1: 10, property2: 'test'},
    {name: 'Selection2', property1: 20, property2: 'test2'}
  ];
  subject:Subject<any> = new Subject();

  constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) {
  }

  ngOnInit(){
    this.loader.loadIntoLocation(DynamicComponent, this.elementRef, 'container', this.injector)
    .then(compRef =>this.subject.subscribe(compRef.instance));
    // subscribe after loading the dynamicComponent
  }

  // set the new selection and push it to subscribers
  changeSelection(newSelection){
    this.currentSelection = newSelection;
    this.subject.next(this.currentSelection);
  }
}

这是我编辑后您的工作，“如果我将导入更改为最新的angular beta.6”

---

我知道这是一个很老的问题。但希望有人能从这个答案中受益。

以下是您可以做的，将您的代码从

constructor

移动到

ngOnInit

，并使用承诺来分配动态值

ngOnInit(){
    this.dynamicComponentLoader.loadIntoLocation(DynamicComponent, this.elementRef,'container').then((component)=>{
        component.instance.currentSelection = currentSelection;
    });
}

---

唯一的例子就是这个

ngOnInit(){
    this.dynamicComponentLoader.loadIntoLocation(DynamicComponent, this.elementRef,'container').then((component)=>{
        component.instance.currentSelection = currentSelection;
    });
}