小编Ale*_*kov的帖子

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');
  }
}
Run Code Online (Sandbox Code Playgroud)

是一个帮助您理解我的问题的plunker:

data-binding angular

14
推荐指数
1
解决办法
4968
查看次数

标签 统计

angular ×1

data-binding ×1