如何在 ES6 中使用 angular2 DynamicComponentLoader？

Question

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

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

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');
  }
}

Answer 1

如果要用ES7写代码，我觉得这个时候指定注入最简洁的做法就是使用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');
  }
}

见this plunker

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

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');
  }
}

见this plunker

如何在 ES6 中使用 angular2 DynamicComponentLoader？

How to use angular2 DynamicComponentLoader in ES6?

dependency-injection

angular