动态加载具有依赖关系的 Angular 组件

Question

我一直在为小部件样式仪表板寻找一种干净的方式（不使用私有 API）解决方案。 我想根据用户角色动态地将组件加载到它上面。

有没有办法动态导入组件模块中包含的组件和依赖项，并且这种解决方案生产准备好了吗？

Stackblitz 复制：

https://stackblitz.com/edit/angular-dynamically-loaded-dashboard?file=src/app/dashboard/dashboard.component.html

欢迎任何对清洁解决方案的帮助。

编辑：我尝试使用 ViewContainerRef 解析组件，虽然解决方案有效（组件被渲染），但它只是被附加到视图中，我希望能够获得具有已解决依赖项的组件的引用并将其传递给 * ngComponentOutlet 所以我可以使用 gridster 来移动和调整组件的大小。

Answer 1

我认为您正在寻找的是ComponentFactoryResolver 。 参考这个演示代码

  public render(): void {
    const index = Math.round(Math.random());
    const currentComponent = this.components[index];
    
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(currentComponent as any);

    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();

    let componentRef = viewContainerRef.createComponent(componentFactory);
  }

Answer 2

我已经设法解决它：缺少的链接是 ngModuleFactory 部分：

  <ng-container
    *ngComponentOutlet="widget.component; ngModuleFactory: widget.module"
  ></ng-container>

在 widget.service.ts 我已经解决了模块：

   const { TasksWidgetModule } = await import('../tasks-widget/tasks-widget.module');
   module = await this.compiler.compileModuleAsync(TasksWidgetModule);