基于外部数据的动态路由

Question

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

• ng2初始化App
• App包含Header、router-outlet和Footer
• 默认路由配置为homeComponent
• homeComponent具有categoriesListComponent
• categoriesListComponent调用categoriesService的get方法
• categoriesService从api返回分类列表
• categoriesComponent呈现列表，并通过routesConfigurator将每个类别的新路由注入回App

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

这一部分工作正常，因为我们从主页开始，API调用已经创建了每个类别的routerConfigs。因此，当用户单击类别时，路由已经配置正确的categoryComponent+metadata，并显示正确的信息。

然而，如果直接访问特定类别页面，ng2尚未具有该路由的routerConfig，因为API调用尚未返回任何东西，更不用说触发了。Ng2只渲染具有Header、Footer和空router-outlet的基本App。

我唯一能想到的解决办法非常“hacky”。在应用程序服务器上保留一个缓存的json文件，并在最初的html中加载它，然后将其注入到ng2 bootstrap/init中的服务中。这样，在ng2开始呈现页面之前，路由就已经配置好了。

我请求任何其他可能的建议，也许有更多ng2经验的人可以发表意见。也许这已经得到了解决，我只是没有完善我的google-fu。

提前感谢。

- Vitaliy Isikov

---

抱歉，我在您的内容中没有发现任何问题？！ - null canvas

我正在寻求其他可能的建议... - Vitaliy Isikov

好的，这篇内容太多了，我只是快速浏览了一下，看有没有问号，但没有找到任何问题。 - null canvas

路由器还不够成熟，尽管他们刚推出了新的NEW @angular/router 3.0.0-alpha.3，并正在编写相关文档。 - Ed Morales

我认为路由应该绑定到组件。如果您有一个单一的组件，根据某些 API 调用显示不同的内容，则将它们设置为路由参数（/category/:categoryName）。您可以在 http://victorsavkin.com/post/145672529346/angular-router 上了解更多关于路由器的信息。 - cghislai

是的，我明白。但是类别名称是来自 API 调用的。 - Vitaliy Isikov

Answer 1

在新的路由器（>= RC.3）中，可以使用 resetConfig 来加载新的路由。详情请参考https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchor。

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。

- Günter Zöchbauer

---

组件仍然需要使用import语句在组件顶部导入所有路由，这实际上破坏了动态路由的目的。 - d-man

有一个 loadChildren。我不知道它的工作效果如何。https://dev59.com/qJnga4cB1Zd3GeqPb6kY - Günter Zöchbauer

重置配置api的链接返回404。 - Juha Syrjälä

@GünterZöchbauer 这段代码应该放在哪里？我有一个非常类似的问题，但是我需要调用一个注入的服务来查找允许的路由。https://dev59.com/v6fja4cB1Zd3GeqPwn1h - Sasha Shpota

你可以将路由器注入到该服务中，然后就可以调用 resetConfig 方法。https://angular.io/api/router/Router#resetConfig - Günter Zöchbauer

Answer 2

我不知道上面的评论是否是你想要的解决方案，但我有一个新方法可能会对你和其他开发人员感兴趣。

我创建了一个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 IMPORT
import { DYNAMIC_ROUTES } from 'location javascript file';

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

通过这种方法，您现在可以使用TypeScript操纵JavaScript文件以进行动态更改。您甚至可以通过php创建该文件，然后将其保存在同一位置。请注意，您需要已编译的组件，对于我的情况，有一个组件可以处理所有路由。此外，请确保如果您正在使用删除JavaScript的编译器，请确保将它们读取到构建文件夹中或确保它与您的应用程序编译。

- Vamidi