javascript-Angular 2-如何将id属性设置为动态加载的组件

我正在使用DynamicComponentLoader加载子组件,它会产生以下html：

<child-component> Child content here </child-component>

这是我在父级中加载组件的方式

ngAfterViewInit(){
        this._loader.loadIntoLocation(ChildComponent,this._elementRef,'child');
  }

如何将id属性添加到子组件,以便产生以下html：

<child-component id="someId" > Child content here </child-component>

解决方法:

如果可能的话,我会向ChildComponent添加一个字段并将其绑定ID：

@Component({
  selector: 'child-component',
  host: {'[id]': 'id'}
})
class ChildComonent {
  id:string;
}

this._loader.loadIntoLocation(ChildComponent,this._elementRef,'child')
.then(cmp => cmp.instance.id = 'someId');

另见http://plnkr.co/edit/ihb7dzRlz1DO5piUvoXw?p=preview#

一种更hacky的方式是

this.dcl.loadIntoLocation(Dynamic, this.ref, 'child').then((cmp) => {
  cmp.location.nativeElement.id = 'someId';
});

代替直接访问nativeElement属性,应该可以使用Renderer进行相同的操作.