Angular 2（Final）：resetConfig将路由添加到延迟加载路由

Question

我想了解如何动态添加路由到那些来自延迟加载模块。 我拥有核心应用，而在路线：

export const routes = [{ 
    path: "", 
    component: HomeComponent 
}, { 
    path: "moduleA", 
    loadChildren: "app/moduleA/A.module" 
}]; 

在A.module我从导入 “本地” moduleA.routes.config.ts路线：

const routes = [{ 
    path: "", 
    component: ModuleAHomeComponent, 
    children: [ 
     { path: "", component: ModuleAListComponent }, 
     { path: ":id", component: ModuleADetailComponent } 
    ] 
}]; 
export const routing = RouterModule.forChild(routes); 

到目前为止好。现在，在ModuleADetailComponent中，我有一个“附加模块”列表，我将其称为插件，用于我的webapp，它们是单独开发的，我希望能够在ModuleADetailComponent页面中显示。 因此，此组件的模板是这样的：

<div *ngFor="let plugin of plugins"> 
    <div class="header">{{ plugin.name }}</div> 
    <router-outlet name="*plugin.name*">*LOAD MODULE HERE*</router-outlet> 
</div> 

当然，插件是在导航ModuleADetailComponent装配置，所以我不知道提前哪些模块的配置和有多少是。 最后，这些插件中的每一个都可以是一个NgModule（在工作台环境中单独开发）。

我需要的是：我该如何修改路由器配置，动态地将子项添加到moduleA.routes.config.ts中定义的路由中？ 举例来说，如果我有两个插件，我要动态地使用router.resetConfig有那么我有什么，如果moduleA.routes.config.ts是这样的：

const routes = [{ 
    path: "", 
    component: ModuleAHomeComponent, 
    children: [ 
     { path: "", component: ModuleAListComponent }, 
     { 
      path: ":id", 
      component: ModuleADetailComponent, 
      children: [ 
       { 
        path: "plugin1", 
        loadChildren: "app/plugins/plugin1.module", 
        outlet: "plugin1" 
       }, 
       { 
        path: "plugin2", 
        loadChildren: "app/plugins/plugin2.module", 
        outlet: "plugin2" 
       }     
      ] 
     } 
    ] 
}]; 
export const routing = RouterModule.forChild(routes); 

我希望我能实现它，否则插件将不得不进行开发，但它们可以成为可从导航中受益的大型子模块。

编辑27/09/2016：我已经组装了这个plunkr：http://plnkr.co/edit/6aV5n5K5wdqdiYo49lZv。 我目前能够做的是动态加载组件并将它们添加到应用程序中（请参阅“动态模块”选项卡）。 尽管未找到任何官方文档（请参阅“动态路由”选项卡），但我所做的还是使用多个命名的路由器插座。尽管标签名称，路线提前知道。

我想要做的是：动态加载配置（dynamicRoutes数组中的DynamicRoutesComponent），只有创建每个动态路由一个路由器出口后以及使用时resetConfig（或需要什么）有这样的配置：

{ 
    path: "dynamic-routed", 
    component: DynamicRoutesComponent, 
    children: [ 
    { path: "", component: EmptyComponent }, 
    { path: "component1", component: Component1, outlet: "component1" }, 
    { path: "component2", component: Component2, outlet: "component2" } 
    ] 
} 

每个动态路线有一个孩子。

在此先感谢！

Answer 1

所有的第一，loadChildren属性方法必须具有以下格式（https://angular.io/docs/ts/latest/guide/router.html#!#asynchronous-routing）提供：

{ 
    path: 'admin', 
    loadChildren: 'app/admin/admin.module#AdminModule', 
}, 

正如所看到的上述情况，module path和module name与#炭接合。

就你而言，你需要修改你的应用程序。

export const routes = [{ 
    path: "", 
    component: HomeComponent 
}, { 
    path: "moduleA", 
    loadChildren: "app/moduleA#ModuleA" 
}]; 

这只是一个前奏，现在，让我们进入了解决方案：路线如下（不知道你的模块/文件名，并plunkr样品不反映在这个问题上给出的名称）或多或少你的问题。据我读，你想动态添加子路由。

您可以使用以下代码在您的要素模块中动态提供子路线。

import {ROUTES} from '@angular/router/src/router_config_loader'; 
import {ANALYZE_FOR_ENTRY_COMPONENTS} from '@angular/core'; 

[...] 
let routesToAdd = ... // provide your routes here 

@NgModule({ 
    [...] 
    imports: [RouterModule.forChild([])] // Empty on purpose 
    [...] 
    providers: [ 
    { 
     provide: ROUTES, 
     useValue: routesToAdd, 
     multi: true 
    }, 
    { 
     provide: ANALYZE_FOR_ENTRY_COMPONENTS, 
     useValue: routesToAdd, // provide them here too 
     multi: true 
    } 
    ], 
    [...] 
}) 

你必须提供ANALYZE_FOR_ENTRY_COMPONENTS令牌相同的路线（以及ROUTES令牌），否则你会得到No component factory found for YOUR_COMPONENT. Did you add it to @NgModule.entryComponents?错误。

但是，此代码可能在AoT编译期间产生错误。在这种情况下，您需要为ROUTES令牌提供factory而不是value。但是，您将无法为ANALYZE_FOR_ENTRY_COMPONENTS令牌提供factory令牌 - 它只接受useValue（请参阅https://github.com/angular/angular/blob/03e855ae8f9e9b86251320c7551a96092bd8b0c4/modules/%40angular/compiler/src/metadata_resolver.ts#L926）。

在这种情况下，使用下面的代码的功能模块：

import {ROUTES} from '@angular/router/src/router_config_loader'; 

[...] 
let routesToAdd = ... // provide your routes here 

@NgModule({ 
    [...] 
    imports: [RouterModule.forChild([])] // Empty on purpose 
    [...] 
    providers: [ 
    { 
     provide: ROUTES, 
     useFactory: (getRoutesFromSomewhere), 
     //deps: [SomeService, SOME_TOKEN] // deps is optional, in the case you need no params - delete it; otherwise pass 'em 
     multi: true 
    } 
    ], 
    entryComponents: [CompA, CompB, CompC, etc...] 
    [...] 
}) 

注意：使用观测量/承诺提供的路线是不是一个可靠的解决方案，因此角路由器预计Route[]或Routes，但HTTP请求只能返回一个Observable/Promise（Angular应用程序已初始化，但路径的检索过程仍使用Observables/Promises继续）（请参阅https://github.com/ngx-i18n-router/config-loader#readme）。

使用返回Route[]或Routes的函数。

同时，您可能会检查@ngx-i18n-router/core（Angular的国际化实用工具，受益于动态路由）和此example-app作为其实施的module file。