2

我有 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。

动态容器.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 部分更加棘手。

4

1 回答 1

1

您可以使用动态组件加载器而不是 ng-dynamic-components。

您可以根据条件加载和删除组件。动态加载组件。（示例保持设置超时，但您可以根据需要从服务或后端调用该函数。）

在此处的解决方案中，您可以找到如何动态删除组件。

于 2019-09-05T17:04:21.130 回答