Angular2 (RC4) 路由與導(dǎo)航詳解

更新時(shí)間：2016年09月21日 11:01:43 作者：Yeaseon

這篇文章主要介紹了Angular2 (RC4) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下

基礎(chǔ)知識(shí)

1.<base href>

大多數(shù)帶路由的應(yīng)用都要在 index.html 的 <head>標(biāo)簽下添加一個(gè) <base>元素。

2.導(dǎo)入路由庫(kù)

import { ROUTER_DIRECTIVES } from '@angular/router';

3.配置

首選方案是用帶“路由數(shù)組”的provideRouter工廠函數(shù)（[provideRouter(routes)]）來(lái)啟動(dòng)此應(yīng)用。

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

const routes: RouterConfig = [
 { path: 'crisis-center', component: CrisisCenterComponent },
 { path: 'heroes', component: HeroListComponent },
 { path: 'hero/:id', component: HeroDetailComponent },
 { path: '**', component: PageNotFoundComponent }
];

export const appRouterProviders = [
 provideRouter(routes)
];

RouterConfig是一個(gè)路由數(shù)組，它決定如何導(dǎo)航。每個(gè)Route會(huì)把一個(gè) URL 的 path映射到一個(gè)組件。

path不能使用斜杠/開頭。路由器會(huì)為我們解析和生成URL。

第三個(gè)路由中的id是一個(gè)路由參數(shù)的 token。

第四個(gè)路由中的**代表路由是一個(gè)通配符路徑。如果當(dāng)前無(wú)法匹配上我們配置過的任何一個(gè)路徑，路由器就會(huì)匹配上這一個(gè)，類似于 switch中的default。當(dāng)需要顯示 404 頁(yè)面，該特性非常有用。

我們將配置好的routes數(shù)組傳給provideRouter（）函數(shù)，這個(gè)函數(shù)返回一個(gè)經(jīng)過配置的 Router服務(wù)提供商

最后通過 appRouterProviders數(shù)組導(dǎo)出這個(gè)提供商，以便在main.ts中簡(jiǎn)單的注冊(cè)路由器依賴。
在 main.ts中的bootstrap函數(shù)中注冊(cè)路由器的提供商。

main.ts

// main entry point
import { bootstrap }   from '@angular/platform-browser-dynamic';
import { AppComponent }  from './app.component';
import { appRouterProviders } from './app.routes';

bootstrap(AppComponent, [
 appRouterProviders
])
.catch(err => console.error(err));

4.<router-outlet>

上面的配置完成后，當(dāng) URL 變?yōu)?/heroes時(shí)，路由器就會(huì)匹配到path為heroes的Route，并且在宿主視圖中的<router-outlet>中顯示HeroListComponent組件。

5.[routerLink]

我們?cè)?lt;a>標(biāo)簽中添加了routerLink指令，可以一次性綁定到我們路由中的path值。

如果routerLink想要綁定動(dòng)態(tài)信息，我們就可以把它綁定到一個(gè)能夠返回路由鏈接數(shù)組的模板表達(dá)式上。路由器最終會(huì)把此數(shù)組解析成一個(gè) URL 和一個(gè)組件視圖。

我們還可以往<a>中添加一個(gè)routerLinkActive指令，用于在相關(guān)的routerLink被激活時(shí)所在元素添加或移除CSS類。該指令可以直接添加到該元素上，也可以直接添加到其父元素上。

AppComponent模板

template: `
 <h1>Component Router</h1>
 <nav>
 <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
 <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
 </nav>
 <router-outlet></router-outlet>
`,

6.路由器狀態(tài)

在每個(gè)導(dǎo)航的生命周期完成時(shí)，路由器會(huì)構(gòu)建出一個(gè) ActivatedRoute組成的樹，它表示路由器的當(dāng)前狀態(tài)。我們可以在應(yīng)用中任何使用 Router服務(wù)及其 routerState屬性來(lái)訪問當(dāng)前的RouterState值。

7.ROUTER_DIRECTIVES

RouterLink、RouterLinkActive和RouterOutlet是ROUTER_DIRECTIVES集合中的指令，所以需要在@Component元數(shù)據(jù)中加入到directives數(shù)組中。

directives: [ROUTER_DIRECTIVES]

以上就是對(duì)Angular2 (RC4) 路由與導(dǎo)航的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: