Angular 2 append Component dynamic to DOM o template

Question

Sto pianificando di aggiungere un componente dinamico al DOM se viene chiamato show(). So che esiste una soluzione con ngIf o [hidden] per nasconderlo e usarlo come direttiva, ma non sono un fan di questa soluzione perché non voglio dichiararla nel mio HTML.

import {Component} from 'angular2/core'; 
    import {InfoData} from '../../model/InfoData'; 

    @Component({ 
    selector: 'Info', 
    templateUrl: './components/pipes&parts/info.html', 
    styleUrls: ['./components/pipes&parts/info.css'] 
    }) 

    export class Info{ 
    infoData: InfoData; 

    public show(infoData: InfoData) { 
     this.infoData= infoData; 
     document.body.appendChild(elemDiv); <----- Here? 
    } 
    } 

e quindi lo dichiaro come provider in modo da poter chiamare show().

import {Component} from 'angular2/core'; 
    import {Info} from './components/pipes&parts/Info'; 

    @Component({ 
    selector: 'Admin', 
    templateUrl: './Admin.html', 
    styleUrls: ['./Admin.css'], 
    directives: [Info], 
    providers: [Info] 
    }) 

    export class Admin { 
    constructor(private info: Info) { 
    info.show(); <---- append the Info Element to DOM 
    } 

Answer 1

Non penso che sia necessario fornire il componente Info come provider all'altro componente. Non sono sicuro che funzioni anche. È possibile sfruttare Query e QueryView fare riferimento a componenti utilizzati in un altro:

@Component({ 
    selector: 'Admin', 
    templateUrl: './Admin.html', 
    styleUrls: ['./Admin.css'], 
    directives: [Info] 
}) 
export class Admin{ 
    constructor(private @Query(Info) info: QueryList<Info>) { 
    info.first().show(); <---- append the Info Element to DOM 
    } 
} 

Invece di aggiungere l'elemento all'interno del componente Info, è possibile aggiungere dinamicamente questa componente con il DynamicComponentLoader come suggerito da Günter:

@Component({ 
    selector: 'Info', 
    templateUrl: './components/pipes&parts/info.html', 
    styleUrls: ['./components/pipes&parts/info.css'] 
}) 

export class Info{ 
     infoData: InfoData; 

    public show(infoData: InfoData) { 
    this.infoData= infoData; 
    // No need to add the element dynamically 
    // It's now part of the component template 
    // document.body.appendChild(elemDiv); <----- Here? 
    } 
} 

@Component({ 
    selector: 'Admin', 
    //templateUrl: './Admin.html', 
    // To show where the info element will be added 
    template: ` 
    <div #dynamicChild> 
     <!-- Info component will be added here --> 
    </div> 
    `, 
    styleUrls: ['./Admin.css'], 
    directives: [Info] 
}) 
export class Admin{ 
    constructor(private dcl: DynamicComponentLoader, private eltRef:ElementRef) { 
    this._dcl.loadIntoLocation(Info, this._el, 'dynamicChild') 
     .then(function(el) { 
      // Instance of the newly added component 
     }); 
    } 
} 

Spero che ti aiuti, Thierry

Answer 2

UPDATE

Usa ViewContainerRef.createComponent()

• https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
• https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html#!#createComponent-anchor

Per un esempio completo vedi Angular 2 dynamic tabs with user-click chosen components

ORIGINALE

DynamicComponentLoader è stato rimosso tempo fa

È possibile utilizzare DynamicComponentLoader per questo scopo, ma è un po 'ingombrante e ha alcuni problemi legati alla binding.

Consulta anche:

• http://www.syntaxsuccess.com/viewarticle/loading-components-dynamically-in-angular-2.0
• DynamicComponentLoader breaks Data binding
• DynamicComponentLoader does not support inputs or outputs
• Initial Changedetection not working with DynamicComponentLoader
• Angular2: Two-way data binding on component dynamically inserted using DynamicComponentLoader
• How to provide data to a @Component through DynamicComponentLoader
• Angular2: Creating child components programmatically