Конфигурация маршрутизатора New Angular2

Question

Назад при использовании устаревшего маршрутизатора Я смог выполнить router.config и передать объект. Дело в том, что маршрутизатор сам немного настроился после запуска приложения, у объекта был такой же «шаблон», как если бы я использовал @RouterConfig. Я ищу, если есть способ настроить новый роутер таким образом. Просматривая документацию, но я немного не понимаю, так как она еще не задокументирована.

Редактировать из-за ответ

Нет, я не могу использовать @Routes. Дело в том, что я загружаю конфигурацию после построения маршрутизатора. Вот пропущено, как я это сделал со старым маршрутизатором:

 myLoader.loadComponentConfig(configPath) 
     .then(components => { self.Components = components; 
     components.map(comp => { 
      self.RouterComponents.push(
       { 
        path: '/' + comp.name, 
        component: comp, 
        as: comp.name 
       } 
      )}); 
      router.config(self.RouterComponents); 
     }); 

Как вы можете видеть, я строю себе JSon объект (RouterComponents), а затем отправить его к маршрутизатору. Я ищу способ сделать то же самое с новым маршрутизатором или чем-то похожим.

Answer 1

В новом маршрутизаторе (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-class.htmlresetConfig

router.resetConfig([ 
{ path: 'team/:id', component: TeamCmp, children: [ 
    { path: 'simple', component: SimpleCmp }, 
    { path: 'user/:name', component: UserCmp } 
] } 
]); 

Возможно, вам понадобится предоставить некоторую конфигурацию пустого маршрутизатора, чтобы не получить ошибок при запуске приложения.

https://github.com/angular/angular/issues/11437#issuecomment-245995186 обеспечивает rc.6 Plunker

Answer 2

Фактически, одним словом, вы должны использовать @Routes вместо @RouterConfig. Вот пример:

@Routes([ 
    {path: '/crisis-center', component: CrisisListComponent}, 
    {path: '/heroes',  component: HeroListComponent}, 
    {path: '*',  component: CrisisListComponent} 
]) 
export class AppComponent { } 

Посмотреть этот документ на angular.io для более подробной информации:

• https://angular.io/docs/ts/latest/guide/router.html

Вы можете заметить, что он остается несколько опечаток в этом доке с этим разделом - незавершенная работа ;-)

Answer 3

Я думаю, что это лучше:

В main.ts:

import { ROUTER_PROVIDERS } from 'angular2/router'; 

bootstrap(AppComponent, [ 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, { useClass: HashLocationStrategy }) 
]); 

В вашем component.ts:

import { Router, RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 
import { APP_ROUTES } from './route.config'; 

@RouteConfig(APP_ROUTES) 

и создавать файл через route.config.ts:

import { Route } from 'angular2/router'; 

import { HomeComponent } from './home/home.component'; 
import { TableComponent } from './table/table.component'; 

export var Routes = { 
    home: new Route({ 
     path: '/home', 
     component: HomeComponent, 
     name: 'Home', 
     useAsDefault: true, 
     data: { 
      title: 'Home' 
     } 
    }), 
    table: new Route({ 
     path: '/table/:table', 
     component: TableComponent, 
     name: 'Table' 
    }) 
}; 

export const APP_ROUTES = Object.keys(Routes).map(r => Routes[r]);