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

Posted 2023-02-23

【中文标题】Angular2：使用DynamicComponentLoader动态插入的组件上的双向数据绑定

【英文标题】：Angular2: Two-way data binding on component dynamically inserted using DynamicComponentLoader

【发布时间】：2016-02-03 21:18:33

【问题描述】：

我正在开发一个 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');
  

Here 是一个帮助你理解我的问题的插件：

【问题讨论】：

唯一的例子就是这个github.com/angular/angular/blob/…

【参考方案1】：

您可以这样做，将您的代码从 constructor 移动到 ngOnInit 并使用 Promise 分配动态值。

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

【参考方案2】：

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

如果我正确理解了您的问题，您需要将您的 DynamicComponent 设为“Observer”，将您的容器设为“Observable”，甚至更好地设为Subject（以防您的容器需要订阅另一个 observable 来接收选择）”。然后，在加载您的动态组件后，将其订阅到您的容器。

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

容器：

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 在我编辑后工作，“前提是我将导入更改为最新的 angular beta.6”

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