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

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

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

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

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

最后通過 appRouterProviders數(shù)組導(dǎo)出這個提供商，以便在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>

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

5.[routerLink]

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

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

我們還可以往<a>中添加一個routerLinkActive指令，用于在相關(guān)的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)

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

7.ROUTER_DIRECTIVES

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

directives: [ROUTER_DIRECTIVES]

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

您可能感興趣的文章: