基於外部數據的動態路由

我正在研究需要根據某些外部數據源配置路由的應用程序。該應用程序的生命週期是這樣的：基於外部數據的動態路由

NG2 inits與App
應用程序中包含頭，路由器，出口和頁腳
默認路由配置到homeComponent
homeComponent有categoriesListComponent
categoriesListComponent從categories中調用get方法服務
categoriesService從api獲取類別列表
categoriesComponent呈現列表，並通過爲每個類別注入新的路線返回到應用一個routesConfigurator

_{有抽象的實際另一層具有routesService但不需要在這個例子中}

那部分作品，因爲我們開始在主頁上，api調用被創建併爲每個類別創建了routerConfigs。因此，當用戶點擊某個類別時，該路線已經配置了正確的categoryComponent +元數據，並顯示了正確的信息。

但是，如果直接訪問特定類別頁面，ng2還沒有該路由的routerConfig，因爲api調用還沒有返回任何東西，更不用說還發射了。 Ng2只是使用Header，Footer和一個空的router-outlet呈現基本App。

我能想到的唯一解決方案就是「哈克」。在應用服務器上保存一個緩存的json文件，並將其加載到最初的html中，然後將其注入到ng2 bootstrap/init的服務中。這樣，在ng2甚至是存活頁面之前配置路由。

我在尋求任何其他可能的建議，或許是一些有更多ng2經驗的人，我可以加入。也許這已經解決了，我還沒有完善我的google-fu。

在此先感謝。

來源

2016-06-10 Vitaliy Isikov

對不起，但我無法注意到您的內容中有任何問題？！ – AngJobs

'我要求任何其他可能的建議......' –

好吧，它太多了，我只是快速掃描它的任何問號，沒有找到任何。 – AngJobs

在新的路由器（>= RC.3）https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchorresetConfig可以用來加載新航線

router.resetConfig([ 
{ path: 'team/:id', component: TeamCmp, children: [ 
    { path: 'simple', component: SimpleCmp }, 
    { path: 'user/:name', component: UserCmp } 
] } 
]);

你將有一個自定義routerLink指令或只是一些鏈接或按鈕調用事件處理器點擊加載新路線，然後調用router.navigate(...)導航到適當的路線。

https://github.com/angular/angular/issues/11437#issuecomment-245995186提供RC.6 Plunker

來源

2016-06-29 10:06:56

組件仍然需要導入語句來導入組件頂部的所有路由。這實際上殺死了動態路由的目的 –

有'loadChildren'。我不知道它的工作效果如何http://stackoverflow.com/questions/38837493/angular2-rc-4-layz-routing –

鏈接resetConfig API給404 –

我不知道，如果一個以上評論是你的，你想要的結果的sulotion但是我有可能會感興趣的你和其他的新方法那裏的開發人員。

我創建了一個JavaScript文件，我添加了我的路線。

"use strict"; 
const home_component_1 = require("location javascript component file"); 
exports.DYNAMIC_ROUTES = [ 
    { path: '', component: your_component_name_component_1.YourComponentName }, 
]

在 app.routing.ts（你的路由文件）

然後，你將不得不這樣做的方法，你現在可以操縱的JavaScript文件，打字稿動態導入語句添加到您的JavaScript文件

// JAVASCRIPT IMPORT 
import { DYNAMIC_ROUTES } from 'location javascript file'; 

const appRoutes: Routes = [ 
    { path: 'home', component: NormalLayoutComponent, children: DYNAMIC_ROUTES }, 
]

特此變化。你甚至可以通過php創建文件，然後保持在同一個地方。注意你需要在我的情況下有一個已經編譯好的組件，並且它爲我處理一個組件中的所有路由。

還要確保如果您使用的編譯器刪除您的JavaScript，請務必將它們讀取到生成文件夾或確保它與您的應用程序編譯。

來源

2017-03-24 10:03:39 Vamidi

基於外部數據的動態路由

回答

相關問題