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)
]

...但我得到一个空的＆＃34;宾语。 __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
      }],

但是这当然为我的＆＃39; qform＆＃39;注入ng.core.ViewContainerRef的实例。元素，我得到动态加载的组件在结束时#q;＆＃39;元素

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

使用ES5的Angular 2 ViewChild实现

1 个答案: