Angular2 (RC4) 路由與導航詳解

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

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

基礎知識

1.<base href>

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

2.導入路由庫

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

3.配置

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

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是一個路由數(shù)組，它決定如何導航。每個Route會把一個 URL 的 path映射到一個組件。

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

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

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

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

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

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>

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

5.[routerLink]

我們在<a>標簽中添加了routerLink指令，可以一次性綁定到我們路由中的path值。

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

我們還可以往<a>中添加一個routerLinkActive指令，用于在相關的routerLink被激活時所在元素添加或移除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)

在每個導航的生命周期完成時，路由器會構建出一個 ActivatedRoute組成的樹，它表示路由器的當前狀態(tài)。我們可以在應用中任何使用 Router服務及其 routerState屬性來訪問當前的RouterState值。

7.ROUTER_DIRECTIVES

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

directives: [ROUTER_DIRECTIVES]

以上就是對Angular2 (RC4) 路由與導航的資料整理，后續(xù)繼續(xù)補充相關資料，謝謝大家對本站的支持！

您可能感興趣的文章: