Динамическая загрузка существующих компонентов Angular 2 Final Release

Я пытаюсь динамически загрузить компонент в финальной версии 2.0.0.

Используя RC5 я загружал используя следующий код:

Создайте директиву для загрузки элементов управления:

import {
  CheckboxComponent, CheckboxListComponent,DatePickerComponent
} from '../components/';

@Directive({
      selector: '[ctrl-factory]'
    })
    export class ControlFactoryDirective implements OnChanges {
      @Input() model: any;

      constructor(private vcRef: ViewContainerRef, private resolver: ComponentResolver) {
      }

      create(cp) {
        this.resolver.resolveComponent(cp)
          .then(factory => {
            const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
            this.vcRef.createComponent(factory, 0, injector, []);
            let ch = this.vcRef.createComponent(factory, 0, injector, []).instance;
            ch.model = this.model;
        });
      }

      ngOnChanges() {
        if (!this.model) return;

        switch (this.model.type) {
          case 'checkbox':
            this.create(CheckboxComponent);
            break;
          case 'checkboxlist':
            this.create(CheckboxListComponent);
            break;
          case 'datepicker':
            this.create(DatePickerComponent);
            break;
          default:
            break;
        }
      }
    }

Затем загрузил эту директиву на моей странице следующим образом:

<div ctrl-factory *ngFor="let child of page.childrens" [model]="child"></div>

Но после обновления с окончательного выпуска rc5 до 2.0.0 распознаватель больше не существует, его заменил компилятор.

Я нашел множество мест, показывающих, как загрузить его, используя разные коды, но все это слишком сложно, и я не мог заставить его работать.

Возьмите это, например:Как я могу использовать / создать динамический шаблон для компиляции динамического компонента с Angular 2.0?

Он выглядит более специфичным для этого сценария, мой единственный, мне нужно просто загрузить компонент и установить @Input с именем model.

Одна вещь, когда я пытался, я должен был динамически создать модуль для каждого компонента, а затем добавить компонент к нему. Но затем у меня возникли проблемы, сказав, что компонент был установлен в более чем один модуль, попробуйте удалить в некоторых местах не работает.

Основную часть кода, показанного, я получаю по этой ссылке:http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/

И сделал пару изменений.

Обновить

Мне удается заставить это работать, используя следующий подход:

Метод создания был изменен на

private create(cp) {
    @NgModule({
      imports: [BrowserModule, ControlsModule],
      declarations: []
    })
    class DynamicModule {}

    this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(({componentFactories}) => {
        const compFactory = componentFactories.find(x => x.componentType === cp);
        const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
        const cmpRef = this.vcRef.createComponent(compFactory, 0, injector, []);
        cmpRef.instance.model = this.model;
      });
  }

В большинстве мест, которые я нашел, установите создание Component и установите его в DynamicModule, проблема в том, что когда вы уже объявляете тот же компонент в другом модуле, angular собирается жаловаться. Решение в моем случае состояло в том, чтобы импортировать мой ControlsModule, который экспортирует все мои элементы управления.

Ответы на вопрос(2)

Ваш ответ на вопрос