新的 Angular2 路由器配置答案

【问题标题】：New Angular2 router configuration新的 Angular2 路由器配置
【发布时间】：2016-05-17 07:44:54
【问题描述】：

使用已弃用的路由器时，我能够执行 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)，然后将其发送到路由器。我正在寻找一种方法来对新路由器或类似的东西做同样的事情。

【问题讨论】：

我也面临着类似的障碍。我们创建了一个返回路由配置的服务。我可以使用 ngFor 对从服务接收到的数据编写 routeLink。但是我们不能在 @Routes 装饰器中使用服务。通过文档我们没有找到路由器中的任何配置方法。
@Siraj 你可以试试ngrx路由器或使用已弃用的路由器。
或许等待这个github.com/angular/angular/issues/8590

标签： angular angular2-routing

【解决方案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

【讨论】：

【解决方案2】：

我觉得这样比较好：

在 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]);

【讨论】：

1.那是弃用的路由器。 2. 我有一个 jsom 文件，其中包含不时更新的路由，因此我需要能够重新配置它。

【解决方案3】：

其实简而言之你需要使用@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

您会注意到，由于本章正在编写中，因此该文档中仍有一些拼写错误；-)

【讨论】：

再次检查问题，我已经添加了一些相关细节。抱歉，如果不够清楚。