基礎知識
1.<base href>
大多數帶路由的應用都要在 index.html 的 <head>標簽下添加一個 <base>元素。
2.導入路由庫
import { ROUTER_DIRECTIVES } from '@angular/router';
3.配置
首選方案是用帶“路由數組”的provideRouter工廠函數（[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是一個路由數組，它決定如何導航。每個Route會把一個 URL 的 path映射到一個組件。
path不能使用斜杠/開頭。路由器會為我們解析和生成URL。
第三個路由中的id是一個路由參數的 token。
第四個路由中的**代表路由是一個通配符路徑。如果當前無法匹配上我們配置過的任何一個路徑，路由器就會匹配上這一個，類似于 switch中的default。當需要顯示 404 頁面，該特性非常有用。
我們將配置好的routes數組傳給provideRouter（）函數，這個函數返回一個經過配置的 Router服務提供商
最后通過 appRouterProviders數組導出這個提供商，以便在main.ts中簡單的注冊路由器依賴。
在 main.ts中的bootstrap函數中注冊路由器的提供商。
main.ts
// main entry pointimport { 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 變為 /heroes時，路由器就會匹配到path為heroes的Route，并且在宿主視圖中的<router-outlet>中顯示HeroListComponent組件。
5.[routerLink]
我們在<a>標簽中添加了routerLink指令，可以一次性綁定到我們路由中的path值。
如果routerLink想要綁定動態信息，我們就可以把它綁定到一個能夠返回路由鏈接數組的模板表達式上。路由器最終會把此數組解析成一個 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.路由器狀態
在每個導航的生命周期完成時，路由器會構建出一個 ActivatedRoute組成的樹，它表示路由器的當前狀態。我們可以在應用中任何使用 Router服務及其 routerState屬性來訪問當前的RouterState值。
7.ROUTER_DIRECTIVES
RouterLink、RouterLinkActive和RouterOutlet是ROUTER_DIRECTIVES集合中的指令，所以需要在@Component元數據中加入到directives數組中。
directives: [ROUTER_DIRECTIVES]
以上就是對Angular2 (RC4) 路由與導航的資料整理，后續繼續補充相關資料，謝謝大家對本站的支持！
新聞熱點
疑難解答
