Как динамически визуализировать и загрузить компонент с помощью Angular 9 (Ivy) - PullRequest
Новая
       103

Как динамически визуализировать и загрузить компонент с помощью Angular 9 (Ivy)

0 голосов
/ 19 февраля 2020

все!

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

Это часть кода, которая отображает компонент 

//Get the Type of the component by its string's name
        const type: Type<any> = await this.getTypeOfComponent(component);


        //Call the factory for create the component
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(type);
        const componentRef = componentFactory.create(new DialogInjector(this.injector, data));
        this.appRef.attachView(componentRef.hostView);

        //Attach the component 
        const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
        document.querySelector('.flyout').firstChild.appendChild(domElem);

        this.dialogComponentRef = componentRef;

        return homeRef;

И я получил тип компонента, используя две строки в функции getTypeOfComponent : 

let factories = Array.from(this.componentFactoryResolver['_factories'].values());
let factoryClass: any = factories.find((x: any) => x.componentType.name === component);

return factoryClass.componentType;

Я прочитал в Angular 9 с Ivy, вы должны импортировать компонент для «отложенной загрузки» и рендеринга компонента.

Используя, например, 

this.foo = import(`./foo/foo.component`)
                       .then(({ FooComponent }) => FooComponent);

Но я не могу этого сделать, я всегда получаю ту же ошибку, которая 

core.js:5845 ERROR Error: Uncaught (in promise): Error: Cannot find module 'details-products/details-products.component'
Error: Cannot find module 'details-products/details-products.component'

Я пытался с большим количеством путей к компоненту и тем не менее получая ту же ошибку.

Есть идеи? Любые другие способы рендеринга компонента в Angular 9 с помощью Ivy?

EDIT:

Я пробовал импортировать, как сказано в блогах. Например:

import('src/app/my-component.ts')

Это сработает для меня, НО, если я сделаю следующее: 

let src = 'src/app/my-component.ts';
import(src);

Тогда это не сработает и выбрасывает ошибка не может найти модуль.

Есть идеи?

...