Angular 2 – 来自JSON数据的动态路由

所以你必须在platformBrowserDynamic()之前加载main.ts文件中的所有路由.bootstrapModule(AppModule);线.

下面是main.ts文件的示例,其中路由作为json获取并在引导之前加载.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
import { IRoute,IRouteData } from './core/models/route';
import { getComponent } from './core/utils/type-component-mapper';

import { AppRoutes } from './app/app.routes';

export function main() {
    console.log('[main]')
    return platformBrowserDynamic()
        .bootstrapModule(AppModule)
        .catch(err => console.error(err));
}

switch (document.readyState) {
    case 'interactive':
    case 'complete':
        getRoutes();
        break;
    case 'loading':
    default:
        document.addEventListener('DOMContentLoaded',() => getRoutes());
}

function getRoutes() {
    // This is where you load the routes json from your api
    fetch(environment.apiUrl + '/api/routes/get').then((value: Response)  =>                         
    {
        return value.json();
    }).then((routes: IRoute[]) => {
        routes.forEach((o: IRoute) => {
            iterate(o);
        });

        // add each dynamic route to the angular route collection
        AppRoutes.unshift(routes[0]);

        // all dynamic routes have been added,start the angular app
        main();
    });
}

function iterate(route: IRoute) {
    var children = route.children;
    if (children) {
        Array.from(children).forEach((o: IRoute) => {
            iterate(o)
        });
    }

    var component = getComponent(route.data.type);
    if (component) {
            route.component = component;
    }
}

在这个例子中,从api返回的路径json将采用以下形式：

[{
    "path" : Shop,"data" : {
        "type" : ShopPage
    },"children" : [{
        "path" : Bread,"data" : {
            "type" : ProductPage
        }
    },{
        "path" : Milk,"data" : {
            "type" : ProductPage
        }
    }]
}]

此Json数据被解析为IRoute和IRouteData类型：

export interface IRoute {
    path: string;
    data: IRouteData;
    children?: IRoute[];
}

export interface IRouteData {
    type: string;
}

导出AppRoutes const也很重要,这样您就可以将新的动态路由推送到AppRoutes集合.它看起来像这样：

export const AppRoutes: Routes = [
    {
        path: 'hardCodedWelcome',component: WelcomeComponent
    }
];

您还需要为每个路径添加正确的组件.在这种情况下,我会对数据类型属性进行切换以获取正确的组件.这就是我从类型组件映射器文件导入get组件函数的原因,如下所示：

import { Router,Route } from '@angular/router';

import { Type } from '@angular/core';
import { PageTypes } from './page-types';
import { ShopComponent } from '../../app/Shop/shop.component';
import { ProductComponent } from '../../app/Product/Product.component';

export function getComponent(type: string): Type<any> {
    switch (type) {
        case PageTypes.Shop: {
            return ShopComponent;
        }
        case PageTypes.Product: {
            return ProductComponent;
        }
    }
}

这里的页面类型只是一个简单的页面类型列表,所以我不必使用魔术字符串.

export const PageTypes = {
    Shop: 'ShopPage',Product: 'ProductPage',};

当应用程序启动时,路径集合中的所有动态路径都可以通过角度正常解析.这会为应用程序增加一些启动时间,具体取决于有多少路由.但是一旦应用程序启动,所有路由都在config routes集合中,并且对性能没有进一步的影响.

请注意,仅当AOT为false时才有效.如果你想在AOT中使用它,你必须将路由器注入app.component构造函数,然后添加以下行：router.resetConfig(allRoutes);其中所有路由都是您在引导之前将路由推送到的数组.