Angular2 caricamento di contenuto dinamico/html in per loop

Question

Possiedo un array JSON che può contenere il componente o il selettore html per il componente che si desidera caricare. Sto cercando di caricare questi dati all'interno di un ciclo for. Quando provo a interpolare il valore {{d.html}} appare come testo del piano. Quando uso l'approccio innerHTML qui sotto e ispeziono dom vedo l'html lì ma non si comporta come un componente personalizzato (il dom conterrà invece di inizializzarlo e sostituirlo con il modello dei componenti.

I have look al caricatore di contenuto dinamico ma che non sembra adattarsi.Questo è in un ciclo for e pertanto non può utilizzare la sintassi del modello in modo che loadIntoLocation non funzioni per me. Inoltre non è sicuro come funzionerebbe se il componente avesse alcun input.

<div *ngFor="#d of dtabs" class="tab-pane" id="tab-{{d.component}}"> 
    <div [innerHTML]="d.html"></div> 
</div> 

Answer 1

anch'io stavo cercando un modo per farlo. Ho visto la risposta @guyoung e ho costruito qualcosa basato su quello. Ma poi mi sono reso conto che l'DynamicComponentLoader.loadIntoLocation() non esiste più nell'ultima versione e che lo DynamicComponentLoader è già obsoleto.

Ho letto alcuni documenti e post e ho creato una nuova direttiva che ha funzionato correttamente. Controlla per:

import { 
 
    Component, 
 
    ComponentResolver, 
 
    Directive, 
 
    ViewContainerRef, 
 
    Input, 
 
    Injector, 
 
    ApplicationRef 
 
} from "@angular/core"; 
 

 
/** 
 

 
    This component render an HTML code with inner directives on it. 
 
    The @Input innerContent receives an array argument, the first array element 
 
    is the code to be parsed. The second index is an array of Components that 
 
    contains the directives present in the code. 
 

 
    Example: 
 

 
    <div [innerContent]="[ 
 
    'Go to <a [routerLink]="[Home]">Home page</a>', 
 
    [RouterLink] 
 
    ]"> 
 

 
**/ 
 
@Directive({ 
 
    selector: '[innerContent]' 
 
}) 
 
export class InnerContent { 
 

 
    @Input() 
 
    set innerContent(content){ 
 
    this.renderTemplate(
 
     content[0], 
 
     content[1] 
 
    ) 
 
    } 
 

 
    constructor(
 
    private elementRef: ViewContainerRef, 
 
    private injector: Injector, 
 
    private app: ApplicationRef, 
 
    private resolver:ComponentResolver){ 
 
    } 
 

 
    public renderTemplate(template, directives) { 
 
    let dynComponent = this.toComponent(template, directives) 
 
    this.resolver.resolveComponent(
 
     dynComponent 
 
    ).then(factory => { 
 
     let component = factory.create(
 
     this.injector, null, this.elementRef._element.nativeElement 
 
    ); 
 

 
     (<any>this.app)._loadComponent(component); 
 
     component.onDestroy(() => { 
 
     (<any>this.app)._unloadComponent(component); 
 
     }); 
 
     return component; 
 
    }); 
 
    } 
 

 
private toComponent(template, directives = []) { 
 
    @Component({ 
 
    selector: 'gen-node', 
 
    template: template, 
 
    directives: directives 
 
    }) 
 
    class DynComponent {} 
 
    return DynComponent; 
 
    } 
 
}

Answer 2

Angular2 dinamicamente Render Template

import { Component, View, DynamicComponentLoader, ElementRef} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser' 

@Component({ 
    selector: 'some-component', 
    properties: ['greeting'], 
    template: ` 
    <b>{{ greeting }}</b> 
    ` 
}) 
class SomeComponent { } 

@Component({ 
    selector: 'app' 
}) 
@View({ 
    template: ` 
    <h1>Before container</h1> 
    <div #container></div> 
    <h2>After container</h2> 
    ` 
}) 
class App { 
    loader: DynamicComponentLoader; 
    elementRef: ElementRef; 

    constructor(loader: DynamicComponentLoader, elementRef: ElementRef) { 
     this.laoder = loader; 
     this.elementRef = elementRef; 

     // Some async action (maybe ajax response with html in it) 
     setTimeout(() => this.renderTemplate(` 
     <div> 
    <h2>Hello</h2> 
    <some-component greeting="Oh, hey"></some-component> 
     </div> 
    `, [SomeComponent]), 1000); 
    } 

    renderTemplate(template, directives) { 
     this.laoder.loadIntoLocation(
      toComponent(template, directives), 
      this.elementRef, 
      'container' 
     ) 
    } 
} 

function toComponent(template, directives = []) { 
    @Component({ selector: 'fake-component' }) 
    @View({ template, directives }) 
    class FakeComponent { } 

    return FakeComponent; 
} 


bootstrap(App); 

codice completo: https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/dynamically_render_template