Question

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

ng2 inits with App
应用包含标题，路由器插座和页脚
默认路由配置为homeComponent
homeComponent有categoriesListComponent
categoriesListComponent从categoriesService
categoriesService从api
categoriesComponent呈现列表并通过routesConfigurator

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

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

但是，如果直接访问特定的类别页面，那么ng2还没有该routerConfig的路由，因为API调用还没有返回任何内容，更不用说了。 Ng2只是使用页眉，页脚和空路由器来呈现基本应用程序。

我能想到的唯一解决方案就是“＃hacky＆＃34;”。将缓存的json文件保存在应用服务器上并在初始html中加载，然后将其注入ng2 bootstrap / init中的服务。这样就可以在ng2甚至生物之前配置路线来渲染页面。

我要求提出任何其他可能的建议，也许还有一些我可以接受的更多ng2经验的建议。也许这已经解决了，我还没有完善我的google-fu。< / p>

提前致谢。

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

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文件中添加 import 语句

// JAVASCRIPT IMPORT
import { DYNAMIC_ROUTES } from 'location javascript file';

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

通过这种方法，您现在可以使用Typescript操作javascript文件进行动态更改。你甚至可以通过php创建文件，然后将它保存在同一个地方。请注意，在我的情况下你需要有一个已编译的组件，它有一个，它为我处理一个组件中的所有路由。

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

基于外部数据的动态路由

2 个答案: