拆分 – 从主应用程序文件中分离角度2路径配置

我想将路由配置从app文件分成不同的文件,如(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 params移动到不同的文件中,然后将其加载到主app文件中.有可能的？谢谢. (路由配置会很大,所以我想分开这个).

第一个麻烦,就是当我尝试将配置移动到不同的文件并尝试在应用程序文件中导入JSON时 – 我得到了未定义组件的错误.因为componentsName不是一个字符串.无法解决这个问题.

您当然可以将所有路径定义移动到单独的文件中.

在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 { }

原文地址：https://www.jb51.cc/angularjs/142310.html