带有 ES5 的 Angular 2 ViewChild 实现答案

【问题标题】：Angular 2 ViewChild implementation with ES5带有 ES5 的 Angular 2 ViewChild 实现
【发布时间】：2017-06-24 15:02:08
【问题描述】：

我正在使用 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 的实例，并且我会在“qform”元素的末尾获得动态加载的组件

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

如果有人能帮我解决这个问题，我将不胜感激，或者提示..

谢谢！

【问题讨论】：

问题是，你为什么要在 ES5 中尝试这个？
项目已经用 ES5 编写，我正在尝试添加功能，但显然没有运气。

标签： javascript angular dom dependency-injection es5-shim

【解决方案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

【讨论】：