Использование переменной для динамического импорта компонентов - PullRequest
Новая
       4

Использование переменной для динамического импорта компонентов

0 голосов
/ 28 апреля 2020

У меня проблема с Angular 9 на данный момент. Я хочу иметь модальный диалог, который может показать различные компоненты. Например: если я нажимаю кнопку 1, то открывается модальное окно с компонентом 1, а если я нажимаю кнопку 2, на нем отображается компонент 2.

Я нашел решение в inte rnet, где он использует ленивую загрузку, но он использует для каждого Компонент собственной функции, чтобы загрузить его. Поэтому я подумал, что в функцию можно указать путь импорта в качестве параметра: 

async getComponent(componentToBeLoaded ) {
   console.log(componentToBeLoaded)
   this.viewContainerRef.clear();
   const { ArticleFormComponent } = await import(componentToBeLoaded);
   this.viewContainerRef.createComponent(
      this.cfr.resolveComponentFactory(ArticleFormComponent )
   );
}

И затем я называю это так: 

this.getComponent('../../article-form/article-form.component')

Но я получаю ошибка в том, что этот модуль не найден. Если я вставляю путь непосредственно в import (), он работает. Таким образом, нет никаких проблем с путем.

Есть ли способ сделать это динамически? Или это плохая попытка заставить работать такую ​​штуку?

Заранее спасибо

...