如何使用ng-dynamic-component的DynamicModule.withComponents而不為這些組件創建依賴關系？

Question

我有3個模塊，每個模塊都有一個組件：

tasks
  >tasks
    -tasks.component.ts|html|css
  -tasks.module.ts

people
  >people
    -people.component.ts|html|css
  -people.module.ts

dynamic-container
  >dynamic-container
    -dynamic-container.component.ts|html|css
  -dynamic-container.module.ts

而且我正在使用ng-dynamic-component軟件包將任務，人員以及將來的其他一些組件動態地設置為DynamicContainerComponent。

dynamic-container.html

<div *ngFor="let dynComponent of dynComponents()">
   <ndc-dynamic [ndcDynamicComponent]="dynComponent.component">
   </ndc-dynamic>
</div>

數組dynComponents看起來像這樣：

public dynComponents: ITabComponent[] = [
   { name: 'Tasks', icon: 'tasks', component: TasksComponent },
   { name: 'People', icon: 'people', component: PeopleComponent }
];

現在，這已經創建了對TasksModule和PeopleModule的依賴關系，但此外，DynamicContainerModule看起來像這樣

@NgModule({
  declarations: [DynamicContainerComponent],
  imports: [
    CommonModule,
    TasksModule,
    PeopleModule,
    DynamicModule.withComponents([TasksComponent, PeopleComponent])
  ],
  exports: [DynamicContainerComponent]
})
export class DynamicContainerModule { }

那么，如何刪除這些依賴關系並使DynamicContainerComponent真正動態呢？ 我想我可以創建其他模塊，該模塊特定於應用程序，並且返回dynComponents數組（我什至不知道如何正確執行此操作），但是DynamicModule.withComponents部分更加棘手。

Answer 1

您可以使用動態組件加載程序來代替ng-dynamic-components。

並且您可以加載組件並根據條件刪除組件。 動態加載組件 。（示例保持設置的超時，但是您可以根據需要從服務或后端調用該函數。）

在此處的解決方案中，您可以找到如何動態刪除組件。