如何在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中編寫代碼，我認為目前最簡潔的注入方法是使用靜態getter 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中編寫代碼（不支持裝飾器），則還必須使用靜態getter作為annotations屬性。 在這種情況下，您必須導入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');
  }
}

看到這個plunker