angular - 你如何获得在 Angular v13 中动态加载的组件的模块？

Question

在 v12 中，您可以使用以下代码动态加载/导入组件，访问其 NgModule通过ComponentFactory然后使用 ViewContainerRef 将其添加到 DOM .

const injector: Injector = /* injected */
const cfg: ComponentFactoryResolver = /* injected */
const module = await import('path/to/component/file');
const componentDef = module['MyComponent'];
const cf: ComponentFactory = cfg.resolveComponentFactory(componentDef);
const compModule: NgModuleRef = (cf as any).ngModule;

const container: ViewContainerRef = /*retrieved using @ViewChild*/
container.createComponent(cf, null, injector, compModule)

截至 v13 ComponentFactory ( docs ) 和 ComponentFactoryResolver ( docs ) 现在被标记为已弃用和 new signature已添加到 ViewContainerRef.createComponent它接受 componentType: Type<C>作为第一个参数。

abstract createComponent<C>(componentType: Type<C>, options?: { index?: number; injector?: Injector; ngModuleRef?: NgModuleRef<unknown>; projectableNodes?: Node[][]; }): ComponentRef<C>

因此，您现在可以执行以下操作以将动态加载的组件添加到 DOM。

const module = await import('path/to/component/file');
const componentDef = module['MyComponent'];

const container: ViewContainerRef = /*retrieved using @ViewChild*/
container.createComponent(componentDef)

然而，docs ViewContainerRef.createcomponent的新签名显示第二个可选参数是一个名为 options 的对象具有可选属性 ngModuleRef:NgModuleRef<unknown> .文档说明:

ngModuleRef: an NgModuleRef of the component's NgModule, you should almost always provide this to ensure that all expected providers are available for the component instantiation.

问题

我一直在努力寻找 ViewContainerRef.createcomponent 的任何示例用法实际上包括 ngModuleRef 的值并弃用了 ComponentFactoryResolver和 ComponentFactory我想知道检索声明组件的模块的正确/官方方法是什么？

编辑

澄清一下，我感兴趣的是是否仍然可以检索使用 Angular v13 中的新方法动态加载的组件的模块，而无需明确知道该模块的类型？

Answer 1

在 Angular 13+ 中，解决方案是在不使用 DEPRECATED 编译器的情况下进行创建。

如果不使用工厂，则必须使用 ViewContainerRef.createComponent。

在构造函数中导入注入(inject)器 构造函数(private _injector: Injector){}使用 NgModuleRef(ngModule,parentInjector)

创建模块引用

const moduleRef: NgModuleRef<T> = createNgModuleRef(module, this._injector);
this.viewRef.createComponent(componentToOpen, {ngModuleRef: moduleRef});

您还可以在 Angular 文档中阅读所有弃用和可能的替代品 https://angular.io/guide/deprecations