Separate winkel 2 route config von Haupt-app-Datei

Question

Ich möchte route config von App-Datei in andere Datei wie (routeConfig.ts) zu trennen. Es ist möglich?

Zum Beispiel:

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

Ich möchte @RouteConfig params in verschiedene Datei bewegen und es nur innerhalb der Haupt App-Datei zu laden. Es ist möglich? Vielen Dank. (Route config wird sehr groß sein, also möchte ich das teilen).

Erste Probleme, es ist, dass, wenn ich versuche, config in andere Datei zu verschieben und einfach versuchen, JSON in App-Datei zu importieren - ich habe Fehler mit nicht definierten Komponente. Weil componentsName es s not a string. Can t löst dieses Problem.

Answer 1

Sie können alle Routendefinitionen sicher in eine separate Datei verschieben.

In einer Datei wie routen 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 
    } 
]; 

in Ihrem app.component.ts Dann zurück Datei nur tun:

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