之前總結過RC4的路由配置桥言，Angular2升級RC5之后增加了NgModule和RouterModule等等很多組件淋样，所以現在的路由配置方式也變化比較大嘹悼。
1.<base href>
大多數帶路由的應用都要在 index.html 的 <head>標簽下頂部添加一個<base>元素排苍。
2.配置路由器
app.routing.ts
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'heroes',
component: HeroesComponent
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'detail/:id',
component: HeroDetailComponent
}
]
export const routing = RouterModule.forRoot(appRoutes);
創(chuàng)建一個Routes類型數組枝笨，它會把每一個URL匹配到path袁铐，匹配成功則映射到該path對應的組件component上。
然后把這個路由數組appRoutes通過RouterModule.forRoot(appRoutes)導出横浑。
3.引用路由
app.module.ts
import { routing } from './app.routing';
@NgModule({
imports: [
BrowserModule,
routing
],
declarations: [
AppComponent
// some component
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
就這樣剔桨，我們在@NgModule的imports中引用了我們配置好的路由器。
4.在模板中使用路由
完成上面的2伪嫁、3步驟领炫，我們就能在模板中使用路由了
app.component.ts
template: `
<nav>
<a routerLink='/dashboard' routerLinkActive='active'>Dashboard</a>
<a routerLink='/heroes' routerLinkActive='active'>Heroes</a>
</nav>
<router-outlet></router-outlet>
`
我們在<a>標簽中添加了routerLink指令，可以一次性綁定到我們路由中的path值张咳。
如果這個URL的path和routerLink匹配帝洪，就把映射到的組件在<router-outlet>中顯示。
我們還可以往<a>中添加一個routerLinkActive指令脚猾，用于在相關的routerLink被激活時所在元素添加或移除CSS類葱峡。該指令可以直接添加到該元素上，也可以直接添加到其父元素上龙助。
5.總結
在此砰奕，我們就完成了Angular2 (RC5)的路由配置蛛芥。RC5和RC4的路由配置不同之處就在于， RC5的路由不需要在設置路由模板的TS文件導入路由庫
import { ROUTER_DIRECTIVES } from '@angular/router';
直接在NgModule中引入配置好的路由就可以
@NgModule({
imports: [
routing
]
})
導入的路由組件由
import { provideRouter, RouterConfig } from '@angular/router';
變成了
import { Routes, RouterModule } from '@angular/router';
路由數組的導出方式由
export const appRouterProviders = [provideRouter(routes)];
變成了
export const routing = RouterModule.forRoot(appRoutes);
其他部分大體上都是相同的军援，比如路由的數組的配置寫法仅淑、routerLink指令和<router-outlet>等等。詳情見我寫過的RC4的路由配置方式胸哥。
喜歡這篇文章請點贊或收藏涯竟，如果想看到我的更多的文章，請關注我？昭帷Ｂ！
