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)文章
這篇文章主要介紹了Angular中的interceptors攔截器,需要的朋友可以參考下2017-06-06
這篇文章主要為大家詳細(xì)介紹了Angular的事件和表單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了angular2+nodejs實現(xiàn)圖片上傳功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
AngularJS驗證信息框架的封裝插件用法【w5cValidator擴(kuò)展插件】
這篇文章主要介紹了AngularJS驗證信息框架的封裝插件用法,分析了AngularJS表單驗證規(guī)則并實例說明了w5cValidator擴(kuò)展插件的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
AngularJS中的$watch()，$digest()和$apply()區(qū)分
這篇文章主要介紹了AngularJS中的$watch()，$digest()和$apply()區(qū)分，感興趣的朋友可以參考一下2016-04-04
使用AngularJS創(chuàng)建自定義的過濾器的方法
這篇文章主要介紹了使用AngularJS創(chuàng)建自定義的過濾器的方法,AngularJS是非常熱門的JavaScript庫,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了深入理解AngularJs－scope的臟檢查（一） ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Angular項目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關(guān)于Angular項目中$scope.$apply()方法使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angularjs具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來看看吧。2017-07-07
Angular.js回顧ng-app和ng-model使用技巧
這篇文章主要回顧Angular.js中ng-app和ng-model使用技巧，感興趣的小伙伴們可以參考一下2016-04-04
詳解angularJs中關(guān)于ng-class的三種使用方式說明
本篇文章主要介紹了angularJs中關(guān)于ng-class的三種使用方式說明，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06