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