Угловая реализация 2 ViewChild с ES5

Question

Я пишу приложение для углового 2 с ES5.

Я хочу иметь компонент с динамически загруженным дочерним элементом представления, который будет загружать существующие компоненты.

Я видел примеры в машинописном, но я уверен, не сделать это в ES5, и вводить ng.core.ViewChild в компоненте конструктора на основе ng.core.Directive и обновить содержимое элемента DOM (помеченный эту директивой) с динамически загружаемым, существует, компонент.

Я попытался с

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

... и я получаю ElementRef, но потребуется ViewContainerRef обновить содержимое DOM с динамически загружаемым компонентом.

Я пробовал:

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

... но я получаю "пустой" объект. __proto__ object

компонент загружается следующим образом:

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

Я попытался придать ng.core.ViewContainerRef в компонент конструктора:

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

, но это, конечно, впрыскивает экземпляр ng.core.ViewContainerRef для моего элемента «QFORM» , и я получаю динамически загруженный компонент в конце элемента «qform»

Ссылка на plunke г с моим кодом (не работает) http://plnkr.co/edit/mRxGKYvKy8tHRjupNzju?p=preview

Я был бы очень признателен, если кто-то поможет мне разобраться в этом, или бросить намек ..

Спасибо!

Answer 1

Я наконец нашел решение. Я не уверен, что это лучший и самый элегантный способ, но он работает.

Я ввел ng.core.ViewContainerRef в конструктор директивы и сохранил экземпляр экземпляра в член класса.

Член класса директивы был доступен изнутри компонента. Он был доступен через опцию queries компонента.

директива:

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

Компонент:

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

Работа plunker: http://plnkr.co/edit/ooWhiMqSFDtGNGdW3LMK?p=preview