動態加載具有依賴關系的 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);