Angular 2 ViewChild-Implementierung mit ES5

Question

Ich schreibe eine App für angular 2 mit ES5.

Ich möchte eine Komponente mit dynamisch geladener Sicht Kind haben, die vorhandene Komponenten laden wird.

sah ich Beispiele in Typoskript, aber ich bin Fehler in ES5 das zu tun, und ng.core.ViewChild in Komponente Konstruktor auf einem ng.core.Directive und aktualisieren den Inhalt des DOM-Elements (markiert mit dieser Richtlinie) mit einem dynamisch geladen, vorhandenen Basis zu injizieren, Komponente.

Ich habe versucht, mit

queries:[ 
    formBody: ng.core.ViewChild('formBody') 
] 

... und ich bekomme ein ElementRef, würde aber ein ViewContainerRef benötigen DOM Inhalte mit einer dynamisch geladenen Komponente zu aktualisieren.

Ich habe versucht:

queries:[ 
    formBody: ng.core.ViewChild(app.FormBodyDirective) 
] 

... aber ich bekomme ein "leeres" Objekt. __proto__ object

Komponente wird wie folgt geladen:

ngAfterViewInit: function() { 
    var dialogComponentFactory = this.componentResolver.resolveComponentFactory(app.FormBody1_Component); 
    this.formBody = this.formBody.createComponent(dialogComponentFactory); 
}, 

ich versucht habe ng.core.ViewContainerRef in der Komponente Konstruktor zu injizieren:

.Class({ 
     constructor: [ 
     ng.core.ViewContainerRef, 
     function(viewContainer){ 
      this.formBody = viewContainer 
     }], 

aber natürlich injiziert eine Instanz von ng.core.ViewContainerRef für mein 'QFORM' Element , und ich bekomme die dynamisch geladene Komponente am Ende des 'qform' Elements.

Link zum Absturz r mit meinem Code (nicht funktioniert) http://plnkr.co/edit/mRxGKYvKy8tHRjupNzju?p=preview

ich sehr dankbar wäre, wenn jemand würde mir das helfen aussortieren, oder einen Hinweis werfen ..

Dank!

Answer 1

Ich finde endlich eine Lösung. Ich bin mir nicht sicher, dass dies der beste und eleganteste Weg ist, aber es funktioniert.

Ich injiziert ng.core.ViewContainerRef, in Directions Constructor und speicherte es in Instanz in Klasse Mitglied.

Das Member der directive-Klasse war innerhalb der Komponente zugänglich. Es wurde über die Option queries der Komponente verfügbar gemacht.

Die Richtlinie:

app.FormBodyDirective = 
    ng.core.Directive({ 
     selector: '[formBody]' 
    }).Class({ 
     constructor: [ 
     ng.core.ViewContainerRef, 
     function(viewContainer){ 
      this._viewContainer = viewContainer; 
     }] 
    }); 

Die Komponente:

//... 
queries : { 
    formBody: new ng.core.ViewChild(app.FormBodyDirective) 
}, 
directives:[ app.FormBodyDirective ] 
//... 

Arbeiten Plunker: http://plnkr.co/edit/ooWhiMqSFDtGNGdW3LMK?p=preview