Angular 2动态路由

时间:2017-01-03 10:00:09

标签: wordpress angular angular2-routing

我将现有的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数组中注册,并在routes数组中注册路由模块。我无法让nav.service在路由模块文件中工作。

2 个答案:

答案 0 :(得分:1)

我刚刚开始尝试动态添加路线到角度2,并发现用

获取当前路线

this.router.config

然后更改它们并使用

应用更改

this.router.resetConfig(newRoutes);

工作得很好 我这里有我的演示项目,可以帮助从json https://github.com/davidejones/angular2-routertest

动态添加团队成员

答案 1 :(得分:0)

现在可以使用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 App中使用angular-xo模块通过调用以下路由器加载和更新这些路由: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