Как использовать angular2 DynamicComponentLoader в ES6?

Я не, используя typescript, но ES6 и angular2 alpha39, чтобы динамически загружать компонент. Следующий код похож на то, что у меня есть в моем приложении. Я заметил, что angular2 не создает экземпляр DynamicComponentLoader или ElementRef и не вводит в конструктор. Они undefined.

Как я могу сделать инъекцию DynamicComponentLoader с помощью ES6 и 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');
  }
}

Ответы

Ответ 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');
  }
}

Смотрите этот плункер

Если вы хотите написать код в 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');
  }
}

Смотрите этот плункер