基于外部数据的动态路由

Question

我正在开发一个需要根据某些外部数据源配置路由的应用程序.应用程序的生命周期如下所示:

• ng2 inits with App
• 应用程序包含页眉,路由器插座和页脚
• 默认路由配置为homeComponent
• homeComponent有categoriesListComponent
• categoriesListComponent从categoriesService调用get方法
• categoriesService从api中获取类别列表
• categoriesComponent呈现列表并通过routesConfigurator将每个类别的新路由注入App

_{实际上有一个带有routesService的另一层抽象,但这个例子不需要}

该部分工作,因为我们从主页开始,进行API调用并routerConfigs为每个类别创建.因此,当用户单击某个类别时,路径已经配置了正确的categoryComponent+,metadata并且它们会显示正确的信息.

但是,如果直接访问某个特定的类别页面,那么ng2还没有routerConfigfor the route,因为API调用还没有返回任何内容,更不用说了.Ng2只是使用Header,Footer和一个空路由器来呈现基本应用程序.

我能想到的唯一解决方案就是"hacky".将缓存的json文件保存在应用服务器上并在初始html中加载,然后将其注入ng2 bootstrap/init中的服务.这样,在ng2甚至生物之前配置路线以呈现页面.

我要求任何其他可能的建议,也许有一些我可以接受的更多ng2经验的人.也许这已经解决了,我还没有完善我的google-fu.

提前致谢.

Answer 1

在新路由器(>= 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指令,或者只是一些链接或按钮,在点击加载新路径的地方调用事件处理程序,然后router.navigate(...)调用它来导航到适当的路径.

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