基于外部数据的动态路由

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 还不够完善。

提前致谢。

Answer 1

我不知道上述 cmets 是否是您想要的结果的解决方案，但我有一种新方法可能会对您和其他开发人员感兴趣。

我创建了一个 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 文件以进行动态更改。您甚至可以通过 php 创建文件，然后将其保存在同一个位置。请注意，在我的情况下，您需要一个已经编译的组件，它为我处理一个组件中的所有路由。

此外，如果您使用的编译器会删除您的 javascript，请确保将它们读取到构建文件夹或确保它与您的应用程序一起编译。

Answer 2

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

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