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

问题描述

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

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与App的初始化
• 应用包含页眉，路由器出口和页脚
• 默认路由配置为homeComponent
• homeComponent具有CategoriesListComponent
• categoriesListComponent从CategoriesService调用get方法
• categoriesService从api中获取类别列表
• categoriesComponent呈现列表，并通过routesConfigurator将每个类别的新路由注入到App中

_{实际上还有一个带有routeService的抽象层，但是在此示例中并不需要}

该部分有效，因为我们从主页开始，所以进行了API调用并为每个类别创建了routerConfigs.因此，当用户单击类别时，该路由已经使用正确的categoryComponent + metadata配置，并且向他们显示了正确的信息.

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.

但是，如果直接访问特定类别页面，则ng2还没有该路由的routerConfig，因为API调用未返回任何内容，更不用说触发了. Ng2只是使用Header，Footer和一个空的Router-Outlet渲染基本的App.

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.

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

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.

我正在寻求其他可能的建议，也许有人对我有更多的ng2经验，可以对此感兴趣.也许这已经解决了，而我还没有完善我的google-fu.

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.

谢谢.

推荐答案

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

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 }
 ] }
]);

您将有一个自定义的routerLink指令，或者只有某些链接或按钮，该链接或按钮在单击时会调用事件处理程序，并在其中加载新路由，然后调用router.navigate(...)导航到相应的路由.

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 提供了一个 RC.6 柱塞

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