Angular2 lädt dynamischen Inhalt/html in for-Schleife

Question

Ich habe ein JSON-Array, das entweder die Komponente oder den HTML-Selektor für die Komponente enthalten kann, die ich laden möchte. Ich versuche, diese Daten in eine for-Schleife zu laden. Wenn ich versuche, den Wert {{d.html}} zu interpolieren, erscheint er als Plantext. Wenn ich den innerHTML-Ansatz unten benutze und das dom überprüfe, sehe ich das html dort, aber es verhält sich nicht wie eine benutzerdefinierte Komponente (das dom wird nur enthalten, statt es zu initialisieren und durch die Komponentenschablone zu ersetzen.

Ich habe gesucht am Dynamic Content Loader, aber das passt nicht. Das ist in einer for-Schleife und kann daher nicht die Template-Syntax verwenden, so dass loadIntoLocation für mich nicht funktioniert. Auch nicht sicher, wie es funktionieren würde, wenn die Komponente eine Eingabe hätte.

Render

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

Answer 1

ich auch für einen Weg suchte, das zu tun. Ich sah die Antwort von @guyoung und baute etwas darauf basierend auf. Aber dann habe ich festgestellt, dass DynamicComponentLoader.loadIntoLocation() nicht mehr in der letzten Version existiert, und DynamicComponentLoader ist bereits veraltet.

Ich las einige Dokumente und Beiträge und erstellte eine neue Richtlinie, die gut funktionierte. Check out:

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 dynamisch Vorlage

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); 

vollständiger Code: https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/dynamically_render_template