angolare 2 - Come impostare l'attributo id alla componente caricato dinamicamente

Question

Sto usando DynamicComponentLoader per caricare il componente figlio e produce il seguente codice HTML:

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

ed ecco come sto caricando il componente nel genitore

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

Come posso aggiungere l'attributo id per il componente figlio in modo che esso produce il seguente codice HTML:

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

Answer 1

Se possibile vorrei aggiungere un campo per ChildComponent e legare id ad esso:

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

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

Vedi anche http://plnkr.co/edit/ihb7dzRlz1DO5piUvoXw?p=preview#

Un modo più hacky sarebbe

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

Invece

di accesso a prop. nativeElement direttamente, dovrebbe essere possibile fare lo stesso con Renderer.