Angular 2 动态路由答案

【问题标题】：Angular 2 dynamic routingAngular 2 动态路由
【发布时间】：2017-01-03 10:00:08
【问题描述】：

我正在将现有的 db (Wordpress) 驱动站点转换为 Angular 2 前端，同时保持后端不变。我正处于路由阶段，我想从数据库中提取的 JSON 数据创建路由。

所以，我创建了一个服务来从数据库中提取数据，并创建了一个单独的路由模块来注册路由：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NavService } from './nav.service';

var navService: NavService;
const routes: Routes = navService.getRoutes();

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRouting{}

nav.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

@Injectable()

export class SiteNavService{
    private _navUrl = 'pathtofile/?action=ajax_site_nav';
constructor(private _http: Http){}
    getNav(){
        return this._http.get(this._navUrl)
        .map( res => res.json())
        .toPromise();
    }

}

服务注册在 app.module.ts providers 数组中，路由模块注册在 imports 数组中。我无法让 nav.service 在路由模块文件中工作。

【问题讨论】：

标签： wordpress angular angular2-routing

【解决方案1】：

我刚刚一直在尝试将路由动态添加到 angular 2 并发现获取当前路由

this.router.config

然后更改它们并应用更改

this.router.resetConfig(newRoutes);

工作得很好我在这里有我的演示项目，这可能有助于从 json https://github.com/davidejones/angular2-routertest 动态添加团队成员

【讨论】：

我可以看到你做了什么，但这不是我想要达到的目标，我开始认为这是不可能的。我想从数据库中提取路由器配置。因此，路径及其各自的组件名称与任何其他路由器属性一起存储在数据库中。

【解决方案2】：

现在可以使用 Xo for Angular：https://wordpress.org/plugins/xo-for-angular/

Xo 根据您的 WordPress 内容、帖子、页面等创建动态路由。

实现这一点的秘诀是在 Angular Route 定义中使用 loadChildren 来延迟加载特定模块。这是必要的，否则 Route 需要一个不现实的导入组件。

文档站点 API 的此输出示例：https://angularxo.io/xo-api/routes/get

然后在使用 angular-xo 模块的 Angular 应用程序中，通过调用 router.resetConfig(response.routes); 来加载和更新这些路由：router.resetConfig(response.routes);

取自此文件：https://github.com/WarriorRocker/angular-xo-node/blob/master/lib/src/services/route.service.ts

完全披露，我是上述插件的作者。

更多文档（正在进行中）：https://angularxo.io

示例主题：https://github.com/WarriorRocker/angular-xo-material

【讨论】：