基于外部数据的dynamic路由

我正在处理一个需要根据外部数据源来configuration路由的应用程序。 应用程序的生命周期如下所示:

  • ng2与应用程序
  • 应用程序包含标题,路由器sockets和页脚
  • 默认路由configuration为homeComponent
  • homeComponent有categoriesListComponent
  • categoriesListComponent从categoriesService中调用get方法
  • categoriesService从api获取类别列表
  • categoriesComponent呈现列表并通过routesConfigurator将每个类别的新路由注入到App中

实际上有一个与routesService的抽象层,但这不是这个例子所需要的

这部分工作,因为我们开始在主页,api调用,并创build了routerConfigs每个类别。 所以当用户点击一个类别时,路由已经configuration了正确的categoryComponent +元数据,并显示正确的信息。

但是,如果直接访问某个特定的分类页面,那么ng2还没有该路由的routerConfig,因为api调用还没有返回任何东西,更不用说发射了。 Ng2只是呈现基本的应用程序头,页脚和一个空的路由器sockets。

我能想到的唯一的解决办法是“哈克”。 在应用服务器上保存一个caching的json文件,并将其加载到最初的html中,然后将其注入到ng2 bootstrap / init的服务中。 那样的话,这些路由在ng2甚至是生命之前被configuration来渲染页面。

我正在寻求任何其他可能的build议,也许有一些更有经验的人可以参加。也许这已经解决了,我还没有完善我的谷歌足够。

提前致谢。

在新路由器( >= RC.3 )中https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchor resetConfig可以用来加载新路由

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

你将有一个自定义的routerLink指令或只是一些链接或button,在点击加载新路由时调用事件处理程序,然后router.navigate(...)以导航到适当的路由。

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

我不知道上面的评论是否是你想要的结果,但是我有一个新的方法可能会对你和其他开发者感兴趣。

我创build了一个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 (你的路由文件),你将不得不添加import语句到你的JavaScript文件

 // JAVASCRIPT IMPORT import { DYNAMIC_ROUTES } from 'location javascript file'; const appRoutes: Routes = [ { path: 'home', component: NormalLayoutComponent, children: DYNAMIC_ROUTES }, ] 

因此,通过执行此方法,您现在可以使用Typescript操作JavaScript文件进行dynamic更改。 你甚至可以通过PHP创build文件,然后保持在同一个地方。 注意你需要在我的情况下有一个已经编译好的组件,并且它为我处理一个组件中的所有路由。

另外请确保如果您使用的编译器删除您的JavaScript,请确保将其读取到生成文件夹或确保它与您的应用程序编译。