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。