Angular2 DynamicComponentLoader

Question

使用任何方法(例如 loadIntoLocation)我可以将指令动态加载到我的基本组件到特定容器中!

@Component({ ... template: ` <div #elementContainer>empty div</div>` ...})

然后调用

this._dcl.loadIntoLocation(DirectiveClass, this._elementRef, 'elementContainer')

我会将 DirectiveClass 的模板传递给空的 div，例如:

<input type="radio" name="gender" value="male" checked>

所以最终结果将是一个空的 div 加上我的输入元素!

问题是:如何通过调用 loadIntoLocation 动态更改值属性或任何其他输入值？

Answer 1

更新

loadIntoLocation() 已从 DynamicComponentLoader 中移除。将 loadNextToLocation() 与 ViewContainerRef

一起使用

export class AppComponent {
  @ViewChild('target', {read: ViewContainerRef}) target;
  top;

  constructor(private dcl:DynamicComponentLoader) {}
  ngAfterViewInit() {
    this.dcl.loadNextToLocation(DynamicComponent, this.target)
    .then(ref => {
      ref.instance.someEvent
      .subscribe(value => {
        this.top = value.clientX; 
      })
    });
  }
}

Plunker example beta.16

原创

这看起来与 Angular 2 - How to set id attribute to the dynamically loaded component 非常相似我最近回答的

您没有解释如何添加输入。

this.dcl.loadIntoLocation(DirectiveClass, this._elementRef, 'elementContainer').then((cmp) => {
  cmp.location.nativeElement.querySelector('input').value = 'someId';
});

可能会做你想做的事(未经测试)。