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

Question

在 Angular 2.0 稳定版中，我有一个应用程序，我必须在其中根据收到的 JSON 数据定义/配置路由。我没有任何预定义的路由。我在 Bootstrap 组件的构造函数中获取此数据。

我怎样才能做到这一点？可能吗？

Answer 1

我实现此目的的方法是在引导 Angular 应用程序之前加载路由。这样，当应用程序启动时，所有动态路由都已经存在。

因此您必须在 platformBrowserDynamic().bootstrapModule(AppModule); 行之前加载 main.ts 文件中的所有路由。

这是 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 常量也很重要，这样您就可以将新的动态路由推送到您的 AppRoutes 集合。它看起来像这样:

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

您还需要为每条路线添加正确的组件。在本例中，我对数据类型属性进行了切换以获取正确的组件。这就是为什么我从 type-component-mapper 文件中导入 get component 函数的原因，它看起来像这样:

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',
};

当应用程序启动时，所有动态路由都在路由集合中，并且可以通过 Angular 正常解析。这会增加应用程序的启动时间，具体取决于有多少路由。但是一旦应用程序启动，所有路由都在配置路由集合中，并且不会对性能产生进一步影响。

请注意，这仅在 AOT 为假时有效。如果你想将它与 AOT 一起使用，你必须将路由器注入(inject)到 app.component 构造函数中，然后添加以下行:router.resetConfig(allRoutes);其中所有路由是您在引导之前将路由推送到的数组。