rekursive dynamische Vorlage Kompilierung in angular2

Question

ich einige meiner Arbeit auf dem gleichen Problem hier beschrieben basierend haben:

dynamische Vorlage dynamische Komponente zu kompilieren mit kantigem 2,0

How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Die Arbeits Plunker beschrieben in der obigen Frage finden Sie here.

Das Problem tritt auf, wenn das dynamische Detail versucht, eine andere dynamische Ansicht zu erstellen, die dynamische Details in der Vorlage verwendet. Wenn ich versuche zu tun, dass ich die folgende Ausnahme erhalten .:

‚Dynamic Detail‘ ist kein bekanntes Element: 1. Wenn ‚Dynamic Detail‘ eine Winkelkomponente ist, stellen Sie sicher, dass es ein Teil ist von dieses Modul.

Dies wird einfach reprocodiert, indem die Logik im Plocker geändert wird, um eine dynamische Vorlage zu erstellen, die "<dynamic-detail></dynamic-detail>" ausgibt.

In der Datei "app/dynamic/template.builder.ts" Ich habe den folgenden Code geändert:

 let editorName = useTextarea 
    ? "text-editor" 
    : "string-editor"; 

Um

 let editorName = useTextarea 
    ? "dynamic-detail" 
    : "string-editor"; 

Wenn das passiert ich in den Lauf Ausnahme oben. Anscheinend ist der Compiler nicht mit dynamischen Details vertraut, wenn er rekursiv ausgeführt wird.

Ich habe versucht, die DynamicDetail Import in den verschiedenen Modulen ohne Glück hinzuzufügen. Vielleicht ist das nicht Teil der Lösung.

Answer 1

Wenn die Änderung "text-editor"-"dynamic-detail" dann Ihre Vorlage wird wie folgt aussehen:

<form> 
    <dynamic-detail 
    [propertyName]="'code'" 
    [entity]="entity" 
    ></dynamic-detail> 
    <dynamic-detail 
     [propertyName]="'description'" 
     [entity]="entity" 
    ></dynamic-detail> 
</form> 

DynamicDetail Komponente nicht propertyName und entity Eigenschaften hat. So können Sie ihre hinzufügen.

detail.view.ts

export class DynamicDetail implements AfterViewInit, OnChanges, OnDestroy, OnInit 
{ 
    @Input() public propertyName: string; 
    @Input() public entity: any; 

Der zweite Teil der Lösung dieser Komponente RuntimeComponentModule ist hinzuzufügen:

type.builder.ts

protected createComponentModule (componentType: any) { 
    @NgModule({ 
    imports: [ 
     PartsModule, 
     DynamicModule.forRoot() // this line 
    ], 
    declarations: [ 
     componentType 
    ], 
    }) 
    class RuntimeComponentModule {} 

    return RuntimeComponentModule; 
} 

nach, dass es sollte funktionieren Plunker Example