如何在 ES6 中使用 angular2 DynamicComponentLoader? [英] How to use angular2 DynamicComponentLoader in ES6?

问题描述

我不使用打字稿，而是使用 ES6 和 angular2 alpha39 来动态加载组件.以下代码类似于我在我的应用程序中的代码.我注意到 angular2 不会创建 DynamicComponentLoader 的实例，也不会创建 ElementRef 并注入构造函数.它们是未定义的.

I'm not using typescript but ES6 and angular2 alpha39 to load a component dynamically. The following code is similar to what I have in my app. What I have noticed is angular2 does not create an instance of DynamicComponentLoader nor ElementRef and inject into the constructor. They are undefined.

如何使用 ES6 和 angular2 alpha39 注入 DynamicComponentLoader?

How can I do the injection of DynamicComponentLoader using ES6 and angular2 alpha39?

import {Component, View, Inject, DynamicComponentLoader, ElementRef } from 'angular2/angular2'

@Component({
  selector: 'dc',
  bindings: [ DynamicComponentLoader ]
})
@View({
  template: '<b>Some template</b>'
})

class DynamicComponent {}

@Component({
  selector: 'my-app'
})
@View({
  template: '<div #container></div>'
})
@Inject(DynamicComponentLoader)
@Inject(ElementRef)
export class App {
  constructor(
    dynamicComponentLoader, 
    elementRef
  ) {
    dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
  }
}

推荐答案

如果你想在 ES7 中写代码，我觉得这个时候指定注入最简洁的方法是对 parameters 使用 static getter代码>:

If you want to write code in ES7, I think the most concise approach to specify injections at this time is to use static getter for parameters:

import {Component, View, DynamicComponentLoader, ElementRef } from 'angular2/angular2'

@Component({
  selector: 'my-app'
})
@View({
  template: '<div #container></b>'
})
export class App {

  static get parameters() {
    return [[DynamicComponentLoader], [ElementRef]];  
  }

  constructor(dynamicComponentLoader, elementRef) {
    dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
  }
}

参见这个plunker

如果你想在不支持装饰器的 ES6 中编写代码，你还必须对 annotations 属性使用静态 getter.在这种情况下，您必须导入 ComponentMetadata 和 ViewMetadata 而不是 Component 和 View 例如:

If you want to write code in ES6, which doesn't support decorators, you must also use static getter for annotations property. In this case you must import ComponentMetadata and ViewMetadata instead of Component and View For example:

import {ComponentMetadata, ViewMetadata, DynamicComponentLoader, ElementRef } from 'angular2/angular2';

export class App {

  static get annotations() {
    return [
      new ComponentMetadata({
        selector: 'app'
      }),
      new ViewMetadata({
        template: '<div #container></b>'
      })
    ];
  }

  static get parameters() {
    return [[DynamicComponentLoader],[ElementRef]];  
  }

  constructor(dynamicComponentLoader, elementRef) {
    dynamicComponentLoader.loadIntoLocation(DynamicComponent, elementRef, 'container');
  }
}

见这个plunker

这篇关于如何在 ES6 中使用 angular2 DynamicComponentLoader?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！