基于外部数据的动态路由 [英] Dynamic routing based on external data

问题描述

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

• ng2 初始化应用程序
• 应用包含页眉、路由器出口和页脚
• 默认路由配置为 homeComponent
• homeComponent 有类别列表组件
• categoriesListComponent 调用categoriesService 的get 方法
• categoriesService 从 api 获取类别列表
• categoriesComponent 呈现列表并通过 routesConfigurator 为每个类别注入新的路由回应用程序

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

那部分有效，因为我们从主页开始，API 调用已经完成，并为每个类别创建了 routerConfigs.所以当用户点击一个类别时，路由已经配置了正确的categoryComponent + metadata，并且显示了正确的信息.

但是，如果直接访问特定类别页面，ng2 还没有该路由的 routerConfig，因为 API 调用还没有返回任何内容，更不用说触发了.Ng2 只是渲染带有页眉、页脚和空路由器插座的基本应用程序.

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

我正在寻求任何其他可能的建议，也许是我可以提供更多 ng2 经验的人.也许这已经解决了，只是我的 google-fu 还不够完善.

提前致谢.

解决方案

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

<块引用>

router.resetConfig([{ 路径:'团队/:id'，组件:TeamCmp，孩子:[{ 路径:'简单'，组件:SimpleCmp }，{ 路径:'用户/:名称'，组件:UserCmp }] }]);

你会有一个自定义的 routerLink 指令，或者只是一些链接或按钮，在点击加载新路由的地方调用事件处理程序，然后 router.navigate(...) 被调用以导航到适当的路线.

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

I'm working on an application that needs to configure routes based on some external data source. The life cycle of the app looks like this:

• ng2 inits with App
• App contains Header, router-outlet, and Footer
• default route is configured to homeComponent
• homeComponent has categoriesListComponent
• categoriesListComponent calls a get method from categoriesService
• categoriesService gets back a list of categories from the api
• categoriesComponent renders the list and injects new routes for each category back into App via a routesConfigurator

_{There's actually another layer of abstraction with a routesService but that isn't needed for this example}

That part works, since we started at the home page, the API call was made and created the routerConfigs for each category. So when the user clicks on a category, the route is already configured with the correct categoryComponent + metadata and they're shown the correct information.

However, if a specific category page is accessed directly ng2 doesn't have the routerConfig for that route yet, since the API call hasn't returned anything, let alone fired off yet. Ng2 just renders the basic App with Header, Footer and an empty router-outlet.

The only solution I can think of is pretty "hacky". Keep a cached json file on the app server and load it up in the initial html, then inject that into a service at ng2 bootstrap/init. That way the routes are configured before ng2 even beings to render the page.

I'm asking for any other possible suggestions, perhaps someone with a bit more ng2 experience that me can chime in. Maybe this was solved already and I just haven't perfected my google-fu enough.

Thanks in advance.

解决方案

In the new router (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchor resetConfig can be used to load new routes

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

You would have a custom routerLink directive or just some link or button that calls an event handler on click where new routes are loaded and then router.navigate(...) is called to navigate to the appropriate route.

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

这篇关于基于外部数据的动态路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！