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

Question

我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>

Answer 1

如果可能的话,我会添加一个字段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#

一种更黑客的方式

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

而不是nativeElement直接访问属性,应该可以做同样的事情Renderer.