使用ES5的Angular 2 ViewChild实现

Question

我正在用ES5为角度2编写应用程序。

我希望有一个动态加载视图子组件，它将加载现有组件。

我在TypeScript中看到了一些示例，但是我在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'元素注入一个ng.core.ViewContainerRef实例，并在'qform'元素的末尾获得动态加载的组件

用我的代码链接到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