Oddzielna kątowe config 2 trasa z głównym aplikacji pliku

Question

Chcę oddzielić config trasy z App pliku do innego pliku podobne (routeConfig.ts). To jest możliwe?

Na przykład:

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

Chcę przenieść @RouteConfig params do innego pliku i załadować go tylko wewnątrz głównego pliku aplikacji. To jest możliwe? Dzięki. (Config trasy wil być wery duży, więc chcę podzielić tego).

pierwsze kłopoty, to jest, że gdy próbuję przenieść do innego pliku config i po prostu spróbuj zaimportować plik JSON w APP - Mam błędy o nieokreślonym Component. Ponieważ componentsName s not a string. Can to t rozwiązać ten problem.

Answer 1

Można oczywiście przenieść wszystkie definicje trasy do osobnego pliku.

W pliku jak 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 
    } 
]; 

Następnie z powrotem w swoim app.component.ts złożyć tylko zrobić:

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