Angular2中建立路由的4個步驟：

1、路由配置：最好新建一個app.toutes.ts文件（能不能用ng命令新建有待調查）

Angular2中路由要解決的是URL與頁面的對應關系（比如URL是http://localhost:4200/all-people，那么頁面顯示的就應該是allPeople畫面，URL是http://localhost:4200/first-come，頁面顯示的就應該是firstCome畫面）。

在Angular2中頁面是由組件組成的（Angular2中的根模塊對應的根組件就表示了整個應用，應用也可以說成只有一個組件，也就是一個頁面，這就是單頁面應用的由來吧），所以路由解決的是URL與組件的對應關系。

這個需要一個數據，它用來表示url與組件的對應關系，Angular2中把這個數據叫作“路由配置”

// 需要從路由模塊中引入Routes類 import { Routes } from '@angular/router'; // 對于需要用url鏈接的組件，需要從文件中導入 import { AllPeopleComponent } from './all-people/all-people.component'; import { HomePageComponent } from './home-page/home-page.component'; // export 導出供其他模塊導入 這是一個數組，數組中沒一個元素是一個對象，最常見的是這個對象有2個屬性，分別是path（對應url）和component（對應組件），直觀上url中輸入一個路徑，在數組中查找path，如果有對應的話就在指定區域顯示與path對應的組件。 export const rootRouterConfig: Routes = [{path: '', // http://localhost:4200component: HomePageComponent},{path: 'all-people', // http://localhost:4200/all-peoplecomponent: AllPeopleComponent}, ]

2、在根模塊中創建根路由模塊。

根路由模塊包含了路由所需的使用服務，它以路由配置為參數，調用RouterModule.forRoot()方法來創建。

這里還有路由策略的問題，會在后續再補充

// 在根模塊中導入路由配置 import { rootRouterConfig } from './app.routes'; // 注意沒有.ts // 需要調用RouterModule.forRoot()方法 import { RouterModule } from '@angular/router';
// 創建路由模塊
const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig);
// 根路由模塊默認提供的路由策略為PathLocationStrategy（另外一個是HashLocationStrategy）。 // PathLocationStrategy路由策略需要一個base路徑，設置base路徑有2種方式，最簡單的是在index.html中設置<base> // 路由策略：pathLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig);
// 路由策略：HashLocationStrategy // const rootRouterModule: ModuleWithProviders = RouterModule.forRoot(rootRouterConfig, {useHash: true}); @NgModule({ declarations: [],
// 導入路由模塊imports: [rootRouterModule],providers: [],bootstrap: [AppComponent] }) export class AppModule { }

3、添加組件存放的區域，使用RouterOutlet指令

這個指令就是在頁面上預留一個區域，當url改變時匹配路由配置中的path，匹配成功后就將與path對應的component加載到這個區域里。

一般情況下，這個指令是放在根組件中，但也會有子組件路由同一父組件的子組件的情況。

<section class="container"><router-outlet></router-outlet> </section>

到目前為止，一個簡單的路由就基本配置完成了，只要在url中輸入正確的path，就能顯示對應的組件。

但是，我們總不能跳轉頁面時還要手動輸入url吧，我們的理想方法是通過頁面的一些操作（比如點擊事件，延遲）改變url，實現path對應的組件顯示，這就是路由跳轉。

4、路由跳轉

如上說的，路由跳轉就是為了不要手動改變url，最常見的就是點擊事件改變url，實現路由跳轉，顯示組件。

路由跳轉有兩種方式：指令跳轉和代碼跳轉。

指令跳轉指的是使用RouterlLink指令，該指令接收一個鏈接參數數組，當事件被觸發時，數組中的所有元素與路由配置中的path接收的數組中的元素進行一一對比，全都相等時得以匹配。

RouterLink有一個好的方法，可以指定routerLinkActive = “className”，也就是當RouterLink被激活時可以給相應的html元素添加clas類。神奇地是，routerLinkActive可以作用于父級元素。

<div id="navbar" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li><a [routerLink]="['/all-people']">allPeople</a></li><li><a [routerLink]="['/first-come']">firstCome</a></li><li><a [routerLink]="['/last-leave']">lastLeave</a></li><li><a [routerLink]="['/form']">newPerson</a></li><li><a [routerLink]="['/bugManage']">bugManage</a></li></ul></div>

需要特別注意的是：RouterLink指令僅響應click事件（碼源分析以后補上），要想響應其他（比如延遲顯示）事件，就要用到代碼跳轉。

以上是Angular2中路由的基本用法，一些細節和關鍵的步驟會在后續更新，比如URL帶參數，頁面如何取得url的值，代碼跳轉和指令跳轉的區別，路由策略的區別，子路由。。。。。

新手，有問題歡迎大家指正。。。

?

轉載于:https://www.cnblogs.com/FireCamp/p/7599119.html

總結

以上是生活随笔為你收集整理的Angular2中的路由（简单总结）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。