官網詳細說明路由與導航：http://angular2.axuer.com/docs/ts/latest/guide/router.html
1.base href
如果app文件夾是應用的根目錄，則在index.html的head中加入
<head>
<base href="/">
...
<head>
2.AppModule配置
2.1引用路由
import { RouterModule, Routes } from '@angular/router';
2.2路由數組
const appRoutes: Routers = [ {path: 'pathA',component: AComponent}, {path: 'pathB/:id', component: BComponent}, { path: 'pathC', component: CComponent, data: { proName: 'proValue' } }, {path: '', redirectTo:'pathA', pachMatch: 'full'}, {path: '**', PageNotFoundComponent} //url不匹配配置中任何路徑時，顯示404頁面 ]
注意：path不能以'/'開頭。否則無法解析url
2.3NgModule添加路由
@NgModule([
imports:[
...
RouterModule.forRoot(appRoutes)
],
...
])
2.4路由插座
<router-outlet></router-outlet> !<--此處呈現component-->
2.5路由器鏈接
<a routerLink="/pathA" RouterLinkActive="cssClassName">Link</a>
2.5.1帶令牌的路由器鏈接
<a [routerLink]="['/hero',14]" [routerLinkActive]="active"></a>
- <a routerLink="/hero/14" routerLinkActive="active"></a>
- this.router.navigate(['/hero',14]);
小結
路由器接口
| 路由器部件 | 含義 |
|---|---|
| Router（路由器） | 為激活的URL顯示應用組件。管理從一個組件到另一個組件的導航 |
| RouterModule（路由器模塊） | 一個獨立的Angular模塊，用於提供所需的服務提供商，以及用來在應用視圖之間進行導航的指令。 |
| Routes（路由數組） | 定義了一個路由數組，每一個都會把一個URL路徑映射到一個組件。 |
| Route（路由） | 定義路由器該如何根據URL模式（pattern）來導航到組件。大多數路由都由路徑和組件類構成。 |
| RouterOutlet（路由插座） | 該指令（）用來標記出路由器該在哪里顯示視圖。 |
| RouterLink（路由鏈接） | 該指令用來把一個可點擊的HTML元素綁定到路由。 點擊帶有綁定到字符串或鏈接參數數組的routerLink指令的A標簽就會觸發一次導航。 |
| RouterLinkActive（活動路由鏈接） | 當HTML元素上或元素內的routerLink變為激活或非激活狀態時，該指令為這個HTML元素添加或移除CSS類。 |
| ActivatedRoute（激活的路由） | 為每個路由組件提供提供的一個服務，它包含特定於路由的信息，比如路由參數、靜態數據、解析數據、全局查詢參數和全局碎片（fragment）。 |
| RouterState（路由器狀態） | 路由器的當前狀態包含了一棵由程序中激活的路由構成的樹。它包含一些用於遍歷路由樹的快捷方法。 |
| 鏈接參數數組 | 這個數組會被路由器解釋成一個路由操作指南。我們可以把一個RouterLink綁定到該數組，或者把它作為參數傳給Router.navigate方法。 |
| 路由組件 | 一個帶有RouterOutlet的Angular組件，它根據路由器的導航來顯示相應的視圖。 |
angular2系統學習 - 路由與導航(1)基礎篇 https://blog.csdn.net/qq451354/article/details/53966296
第二說明：
1.模塊注冊路由
NgModule注冊路由分根模塊(AppModule)與子模塊注冊路由,只有根模塊AppModule才能使用forRoot()方法。
- 主模塊 RouterModule.forRoot()方法
- 子模塊 RouterModule.forChild()方法
2.命令導航路由替代點擊Link導航
需要執行導航時，可以使用router對象用來進行導航
this.router.navigate(['hero',id]); this.router.navigate(['hero']);
angular2系統學習 - 路由與導航(2) https://blog.csdn.net/qq451354/article/details/53967736
實例一：
app.module.ts模塊說明：
1 import { BrowserModule } from '@angular/platform-browser'; 2 import { NgModule } from '@angular/core'; 3 import {RouterModule, Routes} from '@angular/router'; 4 5 //表單 雙向數據綁定 6 import {FormsModule} from '@angular/forms'; 7 import { AppComponent } from './app.component'; 8 //List 中包含兩個tab子組件 9 import {ListComponent} from "./list.component"; 10 /*import {ListOneComponent} from "./list-one.component"; 11 import {ListTwoComponent} from "./list-two.component";*/ 12 import {HomeComponent} from "./home.component"; 13 // 定義路由, bootstrap默認加載組件就是AppComponent,所以他就是主頁導航頁,然后添加的路由都在他的模板中。 14 // 可以所有代碼寫在NgModule中, 也可以這樣自定義常量,然后使用。 15 16 //定義常量 嵌套自路由 17 /*const appChildRoutes:Routes = [ 18 {path:"one",component:ListOneComponent}, 19 {path:"two",component:ListTwoComponent}, 20 //如果地址欄中輸入沒有定義的路由就跳轉到one路由界面 21 { 22 path:"**",redirectTo:"one" 23 } 24 ];*/ 25 //定義常量 路由 26 const appRoutes:Routes=[ 27 {path:'home',component:HomeComponent}, 28 {path:'list',component:ListComponent} 29 /*{ 30 path:'list', 31 component:ListComponent, 32 children:appChildRoutes 33 }*/ 34 ]; 35 //引用路由 36 @NgModule({ 37 declarations: [ 38 AppComponent, 39 HomeComponent, 40 ListComponent 41 /*ListComponent, 42 ListOneComponent, 43 ListTwoComponent*/ 44 ], 45 imports: [ 46 BrowserModule, 47 FormsModule, 48 RouterModule.forRoot(appRoutes) 49 ], 50 providers: [], 51 bootstrap: [AppComponent] 52 }) 53 export class AppModule { }
app.component.ts模塊說明：
1 import { Component } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-root', 5 templateUrl: './app.component.html', 6 styleUrls: ['./app.component.css'] 7 }) 8 export class AppComponent { 9 title = 'app'; 10 }
app.component.html模塊說明：
1 <nav> 2 <a routerLink="/home" routerLinkActive="active">首頁</a> 3 <a routerLink="/list" routerLinkActive="active">列表頁</a> 4 </nav> 5 <router-outlet></router-outlet>
home.component.ts模塊說明：
1 import { Component } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-home', 5 templateUrl: './home.component.html', 6 styleUrls: ['./app.component.css'] 7 }) 8 export class HomeComponent { 9 title = 'home'; 10 }
home.component.html模塊說明：
1 <div style="text-align:center">home的頁面</div>
list.component.ts模塊說明：
1 import { Component } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-list', 5 templateUrl: './list.component.html', 6 styleUrls: ['./app.component.css'] 7 }) 8 export class ListComponent { 9 title = 'list'; 10 }
list.component.html模塊說明：
1 <div style="text-align:center"> 2 list頁面 3 </div>
第三種說明：主子路由
NgModule注冊路由分根模塊(AppModule)與子模塊注冊路由,只有根模塊AppModule才能使用forRoot()方法。
- 主模塊 RouterModule.forRoot()方法
- 子模塊 RouterModule.forChild()方法
RouterModule.forRoot方法實例：
| 結構 | 說明 |
|---|---|
| AppModule | 根模塊 |
| AppRoutingModule | 根路由 |
| AppComponent | 根組件殼 |
| ParAComponent | 根模塊組件A |
| ParBComponent | 根模塊組件B |
| - | - |
| ChildModule | 子模塊 |
| ChildRoutingModule | 子路由 |
| ChildCompnent | 子組件殼 |
| ChildAComponent | 子組件A |
| ChildBComponent | 子組件B |
| ChildCComponent | 子組件C |
下面是各結構核心代碼