Html 动态加载具有依赖项的角度组件

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

是否有一种方法可以动态导入组件模块中包含的组件和依赖项，并且这样的解决方案生产就绪了吗

Stackblitz复制：

欢迎为清洁解决方案提供任何帮助

---

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

我认为您需要的是

组件工厂解析程序。提及

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

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

您是否已经看过，是否需要根据运行时配置（登录用户）加载小部件模块（可能有自己的服务和其他依赖项）？我假设你不想加载所有的东西，所以懒得加载那些模块？如果是，是的，这是可能的。@ShashankVivek-我有，但我将有多个组件，甚至可能有同一组件的多个实例。@MikeOne-想法是每个角色将有一组定义好的小部件，它可以看到。配置不会像示例中那样位于静态阵列中，而是从后端加载。如果角色有查看模块的权限，我想延迟加载模块，而无需路由到其他页面。我正在我当前正在开发的应用程序中执行类似的操作，所以这是非常可能的（而不是黑客或其他任何事情）。您可以在运行时有条件地进行模块导入。如果您想查看一些代码，请告诉我，我可能会抽出一些时间在这里写一个答案。如何使用视图容器ref呈现多个组件？我举的例子是一个小部件，但在实际应用中它会有更多。我最有可能使用ng dynamic作为渲染器，它使用上述方法解析组件，但它仍然不能解析依赖项。
  <ng-container
    *ngComponentOutlet="widget.component; ngModuleFactory: widget.module"
  ></ng-container>

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