Angular2 (RC5) 路由與導(dǎo)航詳解
之前總結(jié)過RC4的路由配置，Angular2升級RC5之后增加了NgModule和RouterModule等等很多組件，所以現(xiàn)在的路由配置方式也變化比較大。
1.<base href>
大多數(shù)帶路由的應(yīng)用都要在 index.html 的 <head>標(biāo)簽下頂部添加一個<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類型數(shù)組，它會把每一個URL匹配到path，匹配成功則映射到該path對應(yīng)的組件component上。
然后把這個路由數(shù)組appRoutes通過RouterModule.forRoot(appRoutes)導(dǎo)出。
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>標(biāo)簽中添加了routerLink指令，可以一次性綁定到我們路由中的path值。
如果這個URL的path和routerLink匹配，就把映射到的組件在<router-outlet>中顯示。
我們還可以往<a>中添加一個routerLinkActive指令，用于在相關(guān)的routerLink被激活時所在元素添加或移除CSS類。該指令可以直接添加到該元素上，也可以直接添加到其父元素上。
5.總結(jié)
在此，我們就完成了Angular2 (RC5)的路由配置。RC5和RC4的路由配置不同之處就在于， RC5的路由不需要在設(shè)置路由模板的TS文件導(dǎo)入路由庫
import { ROUTER_DIRECTIVES } from '@angular/router';
直接在NgModule中引入配置好的路由就可以
@NgModule({
imports: [
routing
]
})
導(dǎo)入的路由組件由
import { provideRouter, RouterConfig } from '@angular/router';
變成了
import { Routes, RouterModule } from '@angular/router';
路由數(shù)組的導(dǎo)出方式由
export const appRouterProviders = [provideRouter(routes)];
變成了
export const routing = RouterModule.forRoot(appRoutes);
其他部分大體上都是相同的，比如路由的數(shù)組的配置寫法、routerLink指令和<router-outlet>等等。詳情見我寫過的RC4的路由配置方式。
以上就是對Angular2 (RC5) 路由與導(dǎo)航的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了AngularJS手動表單驗證的相關(guān)資料，AngularJS的表單驗證大致有兩種，一種是手動驗證，一種是自動驗證，本文重點介紹AngularJS自動表單驗證，感興趣的小伙伴們可以參考一下2016-02-02
Angular.Js中過濾器filter與自定義過濾器filter實例詳解
Angularjs過濾器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定義過濾器，所以下面這篇文章主要給大家介紹了Angular.Js中過濾器filter與自定義過濾器filter的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
本篇文章主要介紹了Angular實現(xiàn)響應(yīng)式表單，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
angular2 ng build部署后base文件路徑問題詳細(xì)解答
本篇文章主要介紹了angular2 ng build部署后base文件路徑問題詳細(xì)解答，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
本篇文章主要介紹了說說AngularJS中的$parse和$eval的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了Angular.js實現(xiàn)掃碼槍掃碼并生成二維碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Angular2學(xué)習(xí)教程之ng中變更檢測問題詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之ng中變更檢測問題的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
理解AngularJs篇：30分鐘快速掌握AngularJs
這篇文章主要介紹了理解AngularJs篇：30分鐘快速掌握AngularJs，詳細(xì)介紹了AngularJs所涉及的知識點，有興趣的可以了解一下。2016-12-12
這篇文章記錄了當(dāng)時剛學(xué)習(xí)angular的時候踩的關(guān)于作用域的坑，希望給以后學(xué)習(xí)Angular作用域的朋友一個提醒，有需要的可以參考學(xué)習(xí)。2016-08-08
這篇文章主要介紹了AngularJS API之equal比較對象的相關(guān)資料,需要的朋友可以參考下2016-09-09