Angular2：双向数据的组件绑定使用DynamicComponentLoader动态插入 [英] Angular2: Two-way data binding on component dynamically inserted using DynamicComponentLoader

问题描述

我开发一个Angular2应用程序，我面临一个问题：

I am developing an Angular2 app, and I faced a problem:

我有一组可以使用的用户界面来选择不同的对象。这每一个对象都有一组选项（对于不同的对象不同），可以使用用户界面进行编辑。现在，我使用DynamicComponentLoader插入当前所选对象的特定组件，因此它可以正确地处理它的选项。
问题是，我不知道如何当前选定对象的数据绑定到一个动态插入选项组成部分。

I have a set of different objects that can be selected using UI. Each of this objects has a set of options (different for different objects) that could be edited using UI. Now, I am using DynamicComponentLoader to insert a specific component for currently selected object, so it can handle its options correctly. The problem is that I don't know how to bind data of currently selected object to a dynamically inserted options component.

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

这里是一个plunker帮助你理解我的问题：

Here is a plunker to help you understand my question:

推荐答案

通过angular2和Rxjs的观测量几乎都是答案。

With angular2 and Rxjs, "Observables" are almost always the answer.

如果我理解正确的问题，你需要让你的DynamicComponent一个的观察家和你的容器的的观测甚至更好的主题（如果您的容器需要订阅另一个可观测到从接收选择）。然后，装载动态组件后，其订阅到您的容器。

If i understood your problem correctly, you need to make your DynamicComponent an "Observer" and your container "an Observable or even better a Subject (In case your container needs to subscribe to another observable to receive selections from)". Then, after loading your dynamic component, subscribe it to your container.

每当你的容器上的选择变化，你推新的选择对你的用户。通过这种方式，您可以加载多个动态组件和所有将在收到您推送。

Whenever the selection changes on your container, you push the new selection to your subscribers. This way, you can load multiple dynamic components and all will receive your pushes.

集装箱：

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

观察员：

class DynamicComponent implements Observer{
  public currentSelection = {};

  next(newSelection){
    this.currentSelection = newSelection;
  }
}

下面是你的 plunker 我的编辑工作后，我提供改进口到最新的角beta.6

Here is your plunker working after my edits, "provided I changed the imports to the newest angular beta.6"

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

I know this is a quite old question. But hopefully someone will benefit from this answer.

这篇关于Angular2：双向数据的组件绑定使用DynamicComponentLoader动态插入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！