2

我曾经使用 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 错误错误：未捕获（承诺）：错误：找不到模块“details-products/details-products.component”错误：找不到模块“details-products/details-products.component”

我已经尝试了很多组件路径，但仍然遇到相同的错误。

有任何想法吗？在 Angular 9 中使用 Ivy 渲染组件的任何其他方式？

编辑：

我已经尝试过博客所说的导入。例如：

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

这对我有用，但如果我做下一个：

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

然后这将不起作用并抛出找不到模块的错误。

有任何想法吗？

4

2 回答 2

1

我用一种丑陋的方式解决了我的问题。但我相信这会对您有所帮助，直到找到更好的解决方案：

const object = Array.from(this.componentFactoryResolver['ngModule'].instance.constructor.decorators.values())[0]['args'][0];
const factories = object.declarations.concat(object.entryComponents, object.imports, object.providers);

// const factories = Array.from(this.componentFactoryResolver['_factories'].keys());
const factoryClass = < Type<any> > factories.find((x: any) => x.name === your_component_name);
const factory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
//
const ref = this.dialogService.open(factory.componentType, {
  header: your_component_name,
});
于 2020-08-30T15:15:46.020 回答
0

我用这种方式解决了我的问题。

const factories = Array.from(this.resolver['ngModule'].instance.constructor.ɵmod.declarations);
const factoryClass = <Type<any>>factories.find((x: any) => x.name === 'your_component_name');
于 2020-10-20T07:22:20.803 回答