Не определено при попытке создать компонент с помощью viewContainerRef.createComponent()

Я пытаюсь динамически загрузить компонент модального окна при нажатии кнопки внутри компонента с помощью DynamicComponentLoader следующим образом:

openUploadDialog() {
  this._loader.loadAsRoot(MyDialog, '#upload-image', this._injector).
    then((c:ComponentRef<MyDialog>) => {
      c.instance.openModal();
    });    
}

Компонент MyDialog -

@ViewChild('dialog') dialog: ElementRef;
 openModal() {   
   if (!this.dialog.nativeElement.showModal) {
     dialogPolyfill.registerDialog(this.dialog.nativeElement);
   }    
   this.dialog.nativeElement.showModal();
 }

Однако я получаю сообщение об ошибке - Cannot read property 'nativeElement' of undefined. Сначала я подумал, что диалоговый элемент ViewChild не был создан в этот момент, поэтому я попытался переместить открывающую часть в обработчик событий ngAfterViewInit. Но я заметил, что эти обработчики событий(ngOnInit и т.д.) не вызываются, когда компонент создан методом DynamicComponentLoader, а может быть, только методом loadAsRoot, точно сказать не могу . Я не пробовал loadNextToLocation, так как мне нужно создать компонент внутри этого.

Есть ли решение этой проблемы?

Обновлять

Благодаря ссылке Günter Zöchbauer я внес следующие изменения:

@ViewChild('dialog-container', {read: ViewContainerRef}) dialog;

openUploadDialog() {
  this._resolver.resolveComponent(MyDialog)
    .then(fact => this.comp = this.dialog.createComponent(fact))
      .then(res => console.log(res));
}

Однако теперь я получаю this.comp как неопределенное. Я что-то делаю не так?

Обновление 2

Хорошо, мне удалось решить эту проблему, переписав этот метод следующим образом:

  openUploadDialog() {
    if (this.dialog) {
      this.dialog.instance.openModal();
      return;
    }

    this._resolver.resolveComponent(MyDialog).
      then(factory => {
        const injector = ReflectiveInjector.fromResolvedProviders([],
          this._container.injector);
        this.dialog = this._container.createComponent(
          factory, null, injector, []);
      });
  }

Итак, я думаю, что инъекция зависимостей имела место быть.


person renchan    schedule 03.06.2016    source источник
comment
const injector = ReflectiveInjector.fromResolvedProviders([], this._container.injector); создает новый инжектор, у которого нет провайдеров. Я думаю, что просто передав null вместо injector или опустив все параметры после factory, вы получите тот же или лучший результат.   -  person Günter Zöchbauer    schedule 06.06.2016
comment
Хм, странно... всякий раз, когда я пытаюсь передать null вместо injector или опустить все параметры после factory, я получаю Error: DI Exception at NoProviderError.BaseException   -  person renchan    schedule 06.06.2016
comment
Странный. См. stackoverflow.com/questions/36325212/ для моего примера.   -  person Günter Zöchbauer    schedule 06.06.2016