在 Angular2 中通过 JSON 加载路由答案

【问题标题】：Loading Routes via JSON in Angular2在 Angular2 中通过 JSON 加载路由
【发布时间】：2016-11-03 15:23:20
【问题描述】：

我正在尝试从 JSON 文件加载路由，因为我不想对它们进行硬编码并懒惰地加载路由。像这样的：

import { RouterModule } from '@angular/router';
const routes = [
    { path: '', loadChildren: 'app/home/home.module' },
    { path: ':item/shoes', loadChildren: 'app/shoes/shoes.module' },
    { path: ':item/watch', loadChildren: 'app/watch/watch.module' }
];
export default RouterModule.forRoot(routes);

我想从 JSON 文件加载以下路由。

{ path: '', loadChildren: 'app/home/home.module' },
        { path: ':item/shoes', loadChildren: 'app/shoes/shoes.module' },
        { path: ':item/watch', loadChildren: 'app/watch/watch.module' }

我正在使用注入到组件中的服务读取 JSON 文件。如何在路由器中注入服务以获取值？或者有没有其他更好的方法可以让我从 JSON 加载路由？

【问题讨论】：

你找到解决方案了吗？

标签： angular angular2-routing angular2-router

【解决方案1】：

这对我有用：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router } from '@angular/router';

import * as AppRoutingJson  from "./app-routing.json";

import { HomeComponent } from "./main/content/pages/joomla/home/home.component";
import { PageNotFoundComponent } from "./main/content/pages/joomla/page-not-found/page-not-found.component";

const routes: Routes = [
    {
        path: '',
        component  : HomeComponent
    }
];

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

export class AppRoutingModule {

    constructor( private router: Router ){

        this.prepareRoutes( AppRoutingJson );

    }

    prepareRoutes( routesJson: any ) {

        let routesArr = <Routes>[];

        routesArr = routesJson;

        routesArr.forEach( route => {

            routes.push( route );

        });

        routes.push(
            {
                "path"      : 'page-not-found',
                "component" : PageNotFoundComponent,
            },
            {
                "path"       : '**',
                "redirectTo" : 'page-not-found'
            }                           
        );

        this.router.resetConfig( routes );  

    }

}

【讨论】：