javascript - 使用 ES5 实现 Angular 2 ViewChild

Question

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

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

我在 TypeScript 中看到了示例，但在 ES5 中我无法做到这一点，并且无法在基于 ng.core.Directive 的组件构造函数中注入(inject) ng.core.ViewChild并使用动态加载的现有组件更新 DOM 元素的内容(用该指令标记)。

我尝试过

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

...我得到了一个 ElementRef，但需要一个 ViewContainerRef 来使用动态加载的组件更新 DOM 内容。

我已经尝试过:

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

...但我得到一个“空”对象。 __proto__ 对象

组件加载如下:

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

我尝试将 ng.core.ViewContainerRef 注入(inject)组件构造函数:

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

但这当然会为我的“qform”元素注入(inject)一个 ng.core.ViewContainerRef 实例，并且我在“qform”元素的末尾获得动态加载的组件

使用我的代码链接到plunker(不起作用)http://plnkr.co/edit/mRxGKYvKy8tHRjupNzju?p=preview

如果有人能帮我解决这个问题，或者给出一个提示，我将非常感激。

谢谢!

Answer 1

终于找到解决办法了。我不确定这是最好、最优雅的方式，但它确实有效。

我在指令构造函数中注入(inject)了ng.core.ViewContainerRef，并将其实例保存到类成员中。

指令类成员可以从组件内部访问。它是通过组件的查询选项提供的。

指令:

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