在不破坏AoT的情况下动态加载组件-Angular2

因此，我试图创建一个模块，它将接受一组组件并动态加载它们，但不会影响AoT。这已经证明是一个挑战，但我真的很接近，除了一件事。如何检索存储在ComponentFactory中的所有组件

在mij

app.module.ts

中，我向动态加载模块的forRoot（）传递一个组件数组：

imports: [
  DynamicLoadModule.forRoot(dynamicComponents),
]

在我的

动态加载.module.ts

中，我将它们全部添加到Angular2组件工厂：

static forRoot(components: any[]) {
        return {
            ngModule: DynamicLoadModule,
            providers: [{
                provide: ANALYZE_FOR_ENTRY_COMPONENTS,
                useValue: components,
                multi: true,
            }, {
                provide: DynamicLoadService,
                useValue: new DynamicLoadService(components)
            }]
        };
    }

现在的问题在于

DynamicLoadService

，它正在干扰AoT。我尝试过有文档记录的导出功能方式，但这并不能解决问题，因为这样我无法将

组件作为参数传递给服务。因此，在中发现的以下内容并没有为我的问题提供解决方案：

let heroServiceFactory = (logger: Logger, userService: UserService) => {
  return new HeroService(logger, userService.user.isAuthorized);
};

export let heroServiceProvider =
  { provide: HeroService,
    useFactory: heroServiceFactory,
    deps: [Logger, UserService]
  };

因此，我尝试使用
OpaqueToken
将组件传递到我的
dynamic load.module
，这也无济于事，因为当时我最多只能使用未编译的组件，我的模块失去了很多灵活性

因此我得出结论，如果我需要
组件工厂中所有组件的数组，我只需要一种方法来检索它们。

因此，我现在使用
ComponentFactoryResolver
根据我需要的名称获取一个模板，以获取所有组件，或者至少获取工厂中所有组件的名称

if (selectedComponent !== '') {
  if (typeof this.currentComponent !== 'undefined') { this.currentComponent.destroy(); }

  const   components = this.dynamicLoadService.getComponents(), // --> instead of getting a list of available components through this service which needs the factory that blocks AoT, I should just be able to retrieve all available components from the ComponentFactory
          component: any = components.find((x) => x.name.toLowerCase().indexOf(selectedComponent) > -1),
          compFactory = this.cfr.resolveComponentFactory(component);

  this.currentComponent = this.vcr.createComponent(compFactory);
  this.currentComponent.instance.data = this.componentData;
}

编辑
因此，第一个答案并没有完全解决问题，但另一个乐于助人的人能够帮助我解决问题

最后，我的代码如下所示：

import { NgModule, ANALYZE_FOR_ENTRY_COMPONENTS, Inject } from '@angular/core';
import { DynamicLoadService } from './dynamic-load.service';

import { DynamicLoadComponent } from './dynamic-load.component';

export function DynamicLoadFactory(cmps) {
    return new DynamicLoadService(cmps);
}

@NgModule({
    declarations: [
        DynamicLoadComponent
    ],
    exports: [
        DynamicLoadComponent
    ]
})
export class DynamicLoadModule {
    static forRoot(components: any[]) {
        return {
            ngModule: DynamicLoadModule,
            providers: [{
                provide: ANALYZE_FOR_ENTRY_COMPONENTS,
                useValue: components,
                multi: true
            },
            {
                provide: 'ENTRIES',
                useValue: components
            },
            {
                provide: DynamicLoadService,
                useFactory: DynamicLoadFactory,
                deps: [[new Inject('ENTRIES')]]
            }]
        };
    }
}

正如我所指出的，
ANALYZE\u FOR\u ENTRY\u组件
不是依赖注入树的一部分（查找源代码）。因此，上面的解决方法解决了这个问题


因此，我在Github得到了一个非常有用的答案

有人建议我

只需将
ANALYZE\u FOR\u ENTRY\u组件注入
DynamicLoadService

现在看起来是这样的：

export function DynamicLoadFactory(cmps) {
  return new DynamicLoadService(cmps);
}

export class DynamicLoadModule {
    static forRoot(components: any[]) {
        return {
            ngModule: DynamicLoadModule,
            providers: [{
                provide: ANALYZE_FOR_ENTRY_COMPONENTS,
                useValue: components,
                multi: true,
            }, {
                provide: DynamicLoadService,
                useFactory: DynamicLoadFactory,
                deps: [new Inject(ANALYZE_FOR_ENTRY_COMPONENTS)]
            }]
        };
    }
}