Angular 2 append Dynamiczny komponent do DOM lub szablonu

Question

Planuję dodać dynamiczną komponent do DOM, jeśli wywoływana jest show(). Wiem, że istnieje rozwiązanie z ngIf lub [hidden] do ukrycia go i użycia go jako dyrektywy, ale nie jestem fanem tego rozwiązania, ponieważ nie chcę zadeklarować go w moim kodzie 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? 
    } 
    } 

a następnie deklaruję to jako dostawcę, więc mogę wywołać 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

Nie sądzę, że musisz dostarczyć komponent Info jako dostawcę do drugiego komponentu. Nie jestem pewien, czy to działa. Można wykorzystać Query i QueryView odwołać komponenty używane w innym:

@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 
    } 
} 

Zamiast dodawania elementu w ramach komponentu Info można dynamicznie dodać ten składnik pomocą DynamicComponentLoader jak sugeruje 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 
     }); 
    } 
} 

Mam nadzieję, że to pomoże, Thierry

Answer 2

UPDATE

Zastosowanie 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

Pełny przykład patrz Angular 2 dynamic tabs with user-click chosen components

ORIGINAL

DynamicComponentLoader usunięto dawno

Można użyć DynamicComponentLoader do tego celu, ale jest to trochę uciążliwe i ma pewne problemy związane z wiązaniami.

Zobacz także:

• 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