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来动态更改value属性或任何其他输入值？

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

可能会做你想要的（未经测试）。