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

Question

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

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

Answer 1

Если вы хотите написать код в ES7, я думаю, что самый краткий подход для определения инъекций в настоящее время - это использовать статический геттер для 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, который не поддерживает декораторы, вы также должны использовать статический геттер для 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');
  }
}

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