Angular 2 ViewChild与ES5的实现

Question

我正在用ES5为angular 2编写一个应用程序。

我想要一个具有动态加载视图子级的组件，它将加载现有组件。

我在TypeScript中看到了一些例子，但在ES5中我没有做到这一点，也没有在基于ng.core.Directive的组件构造函数中注入ng.core.ViewChild，并用动态加载的现有组件更新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
}],

但是，这当然为我的"qform"元素注入了ng.core.ViewContainerRef的实例，并且我在"qfrm"元素的末尾得到了动态加载的组件

链接到带有我的代码的plunker(不工作)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 ]
//...

工作柱塞：http://plnkr.co/edit/ooWhiMqSFDtGNGdW3LMK?p=preview