从主应用程序文件中分离 angular 2 个路由配置

Question

我想将路由配置从应用程序文件中分离到不同的文件中，例如 (routeConfig.ts)。有可能吗？

例如：

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {DashboardComponent} from './dashboard/dashboard.component';


import {MessagesComponent} from '../modules/messages/messages.component';


@Component({
    selector: 'app',
    directives: [
      ROUTER_DIRECTIVES
    ],
    templateUrl: './built/application/app.html'
})

@RouteConfig([
  {
    path: '/',
    name: 'Dashboard',
    component: DashboardComponent,
    useAsDefault: true
  }
])

export class AppComponent {}

我想将@RouteConfig 参数移动到不同的文件中，然后将其加载到主应用程序文件中。有可能的？谢谢。（路由配置会很大，所以我想拆分一下）。

第一个麻烦，当我尝试将配置移动到不同的文件并尝试在应用程序文件中导入 JSON 时 - 我遇到了未定义组件的错误。因为 componentsName its not a string. Cant 解决了这个问题。

Answer 1

您当然可以将所有路由定义移动到一个单独的文件中。

在像 route-definitions.ts:

这样的文件中

import { RouteDefinition } from 'angular2/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { InfoComponent } from './info/info.component';

export const RouteDefinitions: RouteDefinition[] = [
    {
        path: '/',
        name: 'Home',
        component: HomeComponent,
        useAsDefault: true
    },
    {
        path: '/about',
        name: 'About',
        component: AboutComponent
    },
    {
        path: '/info',
        name: 'Info',
        component: InfoComponent
    }
];

然后回到您的 app.component.ts 文件中：

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { RouteDefinitions } from './route-definitions';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [
      ROUTER_PROVIDERS
    ]
})
@RouteConfig(RouteDefinitions)
export class AppComponent { }

从主应用程序文件中分离 angular 2 个路由配置

Separate angular 2 route config from main app file

split

routes

config

angular