app
|-plugins
|-plugin1
|-config.json
|-plugin1.module.ts
|-plugin1.component.ts
|-plugin2
|-config.json
|-plugin2.module.ts
|-plugin2.component.ts
正如您在上面看到的,我有 “app/plugins” 文件夹,其中包含插件。每个插件将包含一个“config.json”文件,该文件将告诉一些配置,包括 -
{
path: "feature1",
moduleFile: "feature1.module",
moduleClassName: "Feature1Module"
}
所以我想要的是,在应用程序 Bootstrap 之前,它将扫描 "app/plugins" 文件夹并加载所有插件配置,并延迟注册所有模块路由。对于上面的例子,路线将是
{
path: "feature1",
loadChildren: "app/plugins/plugin1/plugin1.module#Plugin1Module"
}
这样,我们可以将新插件放入插件文件夹并刷新应用程序,并且我们新放置的插件已启动并运行。
有人知道我怎样才能做到这一点吗?
注意:我使用的是最新的 angular2(2.1.0)
最佳答案
我正在寻找与您所描述的行为相同的行为,我想我已经找到了解决方法,这要归功于这个 github 问题: Lazy loading components without Route
这是我为此编写的代码:plunker here
首先:dynamic.module.ts,动态加载模块及其组件
import { Component, NgModule } from '@angular/core' @Component({ selector: 'my-test', template: `<h1>html template of TestComponent from DynamicModule</h1>` }) export class TestComponent { } @NgModule({ declarations: [TestComponent], exports: [TestComponent] }) export class DynamicModule { }
第二个:这是当您给它模块路径时动态加载模块的组件。
import { Component, ViewContainerRef, Compiler, ComponentFactory, ComponentFactoryResolver, ModuleWithComponentFactories, ComponentRef, ReflectiveInjector, SystemJsNgModuleLoader } from '@angular/core'; class ModuleNode { modulePath: string; componentName: string; } @Component({ moduleId: module.id, selector: 'widgetContainer', templateUrl: './widgetContainer.component.html' }) export class WidgetContainerComponent { widgetConfig: string; module: ModuleNode; cmpRef: ComponentRef<any>; constructor(private widgetService: WidgetLoader, private viewref: ViewContainerRef, private resolver: ComponentFactoryResolver, private loader: SystemJsNgModuleLoader, private compiler: Compiler){} openWebApp(menu:any) { this.loader.load(menu.modulePath) // load the module and its components .then((modFac) => { // the missing step, need to use Compiler to resolve the module's embedded components this.compiler.compileModuleAndAllComponentsAsync<any>(modFac.moduleType) .then((factory: ModuleWithComponentFactories<any>) => { return factory.componentFactories.find(x => x.componentType.name === menu.componentName); }) .then(cmpFactory => { // need to instantiate the Module so we can use it as the provider for the new component let modRef = modFac.create(this.viewref.parentInjector); this.cmpRef = this.viewref.createComponent(cmpFactory, 0, modRef.injector); // done, now Module and main Component are known to NG2 }); }); } ngOnDestroy() { if (this.cmpRef) { this.cmpRef.destroy(); } }
你怎么看?有帮助吗?非常感谢您的反馈。
关于 Angular 2 : Loading modules dynamically from a given folder,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40039825/