1

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

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

我在 TypeScript 中看到了示例，但我在 ES5 中没有这样做，并且ng.core.ViewChild基于 a 注入组件构造函数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”元素注入一个实例，并且我会在“qform”元素的末尾获得动态加载的组件

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

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

谢谢 ！

4

1 回答 1

0

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

我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

于 2017-02-08T09:13:00.707 回答