angular - 如何将项目添加到 NgModule entryComponents 运行时？

Question

我有以下一段 Angular 代码:

dashboard.component.ts

import {Component, AfterViewInit, ComponentFactoryResolver, ViewContainerRef, OnInit, Input} from "@angular/core";
import {WidgetItem} from "../modules/widget-item";
import {WidgetComponent} from "../modules/widget.component";
import {DashboardService} from "./dashboard.service";

@Component({
    selector: 'dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit, AfterViewInit {
    @Input() widgets: WidgetItem[];

    constructor(
        private dashboardService: DashboardService,
        private componentFactoryResolver: ComponentFactoryResolver,
        private viewContainerRef: ViewContainerRef
    ) {}

    ngOnInit(): void {
        this.widgets = this.dashboardService.getWidgets();
    }

    ngAfterViewInit(): void {
        this.loadDashboard();
    }

    private loadDashboard(): void {
        this.viewContainerRef.clear();
        if(this.widgets) {
            for (let widget of this.widgets) {
                let componentFactory = this.componentFactoryResolver.resolveComponentFactory(widget.component);
                let componentRef = this.viewContainerRef.createComponent(componentFactory);
                (<WidgetComponent>componentRef.instance).data = widget.data;
            }
        }
    }

}

和 dashboard.service.ts

import {Injectable}           from '@angular/core';
import {WidgetItem} from "../modules/widget-item";

@Injectable()
export class DashboardService {
    private dashboardWidgets: WidgetItem[];
    constructor() {
        this.dashboardWidgets = [];
    }

    getWidgets() {
        console.log('get widgets');
        return this.dashboardWidgets;
    }

    addWidget(widget: WidgetItem): void {
        console.log('add widget', widget);
        this.dashboardWidgets.push(widget);
    }
}

和contract-widget.component.ts

import {Component} from "@angular/core";
import {WidgetComponent} from "./widget.component";

@Component({
    selector: 'contract-widget',
    templateUrl: './contract-widget.component.html'
})

export class ContractWidgetComponent implements WidgetComponent {
    data: any;
}

和widget.component.ts

export interface WidgetComponent {
    data: any;
}

和widget-item.ts

import {Type} from "@angular/core";
export class WidgetItem {
    constructor(public component: Type<any>, public data:any) {}
}

我尝试做的是使用 componentfactoryresolver 将小部件动态加载到我的仪表板上。当我手动将 ContractWidgetComponent 添加到我的 app.component entryComponents 时，这非常有效。但是，我想要完成的是，我可以在不知道它们存在于我的应用程序中的情况下将小部件加载到我的仪表板上。我已经分离了代码，所以我的文件夹结构如下所示:

/app -- contains app.module.ts, app-routing.module.ts and app.component.ts
/app/parts -- contains dahsboard.component.ts and dahsboard.service.ts
/app/modules -- contains contract-widget.component.ts widget.component.ts and widget-item.ts

在我的小部件中，我还设置了一个组件，因此我可以将该组件用作 loadChildren 来动态加载该组件。 (在我的应用程序/模块中，我确实有更多代码与其他组件和服务一起用于特定功能，这里不需要解释我的问题)。

我想做的是能够在我的/app/modules 中开发另一个模块，只需在那里添加所需的文件，让我的仪表板能够在我的模块中显示任何新的小部件，而无需更改我/app 或/app/parts 目录。

主要部分工作正常，但是当我尝试使用 loadDashboard() 将小部件加载到仪表板上时，出现以下错误:

ERROR Error: Uncaught (in promise): Error: No component factory found for ContractWidgetComponent. Did you add it to @NgModule.entryComponents?
Error: No component factory found for ContractWidgetComponent. Did you add it to @NgModule.entryComponents?

这是有道理的，因为我不想将 ContractWidgetComponent 添加到我的/app/app.module.ts entryComponents 数组，因为我的应用不知道我将拥有什么类型的小部件(将来)。

有什么方法可以在运行时 以编程方式将 ContractWidgetComponent 添加到我的 entryComponent 中，以便我可以在我的仪表板上动态加载我的小部件？

如有任何帮助，我们将不胜感激。

Answer 1

What I want to do is to be able to develop another module inside my /app/modules and just add the needed files there and have my dashboard be able to just display any new widget in my modules without changing code in my /app or /app/parts directory.

是的，你可以做到。只需使用模块声明中指定的 contract-widget.component.ts 定义一个模块，动态加载该模块并使用 compileModuleAndAllComponentsAsync 编译器 API 生成模块的所有工厂。然后您可以访问这些工厂并动态实例化组件。

有关详细信息，请阅读 Here is what you need to know about dynamic components in Angular