Я пытаюсь динамически загрузить компонент модального окна при нажатии кнопки внутри компонента с помощью 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, []);
});
}
Итак, я думаю, что инъекция зависимостей имела место быть.
const injector = ReflectiveInjector.fromResolvedProviders([], this._container.injector);
создает новый инжектор, у которого нет провайдеров. Я думаю, что просто передавnull
вместоinjector
или опустив все параметры послеfactory
, вы получите тот же или лучший результат. - person Günter Zöchbauer   schedule 06.06.2016injector
или опустить все параметры после factory, я получаюError: DI Exception at NoProviderError.BaseException
- person renchan   schedule 06.06.2016