Angular 路由使用整理（一）
Angular的路由器能讓使用者從一個檢視導航到另一個檢視。
Angular2以及以後的版本路由器使用瀏覽器的history.pushState 進行導航，這樣就和多網頁應用連結保持一致了，而不是Angular1.x中還用hash(#)風格處理前端路由。
一、基礎知識
<base href>
大多數帶路由的應用都要在index.html的<head>標籤下先新增一個<base>元素，來告訴路由器該如何合成導航用的URL。
<base href="/">二、使用先匯入模組
在app.module.ts中匯入路由模組
import { RouterModule, Routes } from '@angular/router';
三、配置路由定義和路由出口
每個帶路由的Angular應用都有一個Router(路由器)服務的單例物件。當瀏覽器的URL變化時，路由器會查詢對應的Route（路由），並據此決定改顯示哪兒個元件。//定義路由配置 const appRoutes: Routes = [ { path: 'add', component: MenuAddComponent }, { path: 'detail/:id', component: MenuDetailComponent }, { path: 'home', component: EmptyComponent ，data:{title:'測試1'}}, { path: '', redirectTo: '/home', pathMatch: 'full' }, //空目錄，重定向處理 { path: '**', component: EmptyComponent } //萬用字元，其他路由失敗的，會跳轉到這個檢視 ];
使用RouterModule.forRoot() 方法來註冊路由定義陣列。
路由定義說明：@NgModule({ declarations: [ AppComponent, MenuAddComponent, MenuDetailComponent, EmptyComponent, ], imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
1.每個Route都會把一個URL的path對映到一個元件。注意，path不能以斜槓(/)開頭。
2.路由的:id是一個路由引數佔位符，類似MVC中{id}
3.路由中的data屬性，用來存放每個具體忽悠有關的資訊。使用resolve守衛來獲取動態資料.
4.空路徑('')表示應用的預設路徑，（**）萬用字元，最後制定，路由解析也和MVC中安定義順序先定義先匹配。
路由出口:路由結果內容都顯示在這個位置。
<router-outlet></router-outlet>四、路由連結、路由狀態
<li><a routerLink='/home' routerLinkActive="active">首頁</a></li>
<li><a routerLink='/add' routerLinkActive="active">新增頁面</a></li>RouterLinkActive指令可以幫助使用者綁定當前活動路由的樣式名稱。
路由狀態
在導航的每個生命週期完成時，路由器會構建出一個ActivedRoute組成的樹，他表示路由的當前狀態。我們可以在應用的任何地方用Router服務及其routerState屬性來訪問當前RouterState值。
路由狀態為我們提供了從任意啟用路由開始向上或向下遍歷路由樹的一種方式，以獲得關於父、子、兄弟的路由資訊。
獲取路由引數
import {ActivatedRoute} from "@angular/router";
export class AboutList {
id: Object;
constructor(public route:ActivatedRoute) {
this.id = {};
}
ngOnInit() {
this.route.params.subscribe(params => {
this.id = params // {id: "xxx"}
});
}
}js跳轉路由處理
import {Router} from "@angular/router";
constructor(public router: Router) {
// 相當於window.location.href，介面跳轉
router.navigateByUrl('home');
}總結一下：
|
路由器部件 |
含義 |
|---|---|
|
|
為啟用的URL顯示應用元件。管理從一個元件到另一個元件的導航 |
|
|
一個獨立的Angular模組，用於提供所需的服務提供商，以及用來在應用檢視之間進行導航的指令。 |
|
|
定義了一個路由陣列，每一個都會把一個URL路徑對映到一個元件。 |
|
|
定義路由器該如何根據URL模式（pattern）來導航到元件。大多數路由都由路徑和元件類構成。 |
|
|
該指令（ |
|
|
該指令用來把一個可點選的HTML元素繫結到路由。 點選帶有繫結到字串或連結引數陣列的 |
|
|
當HTML元素上或元素內的 |
|
|
為每個路由元件提供提供的一個服務，它包含特定於路由的資訊，比如路由引數、靜態資料、解析資料、全域性查詢引數和全域性碎片（fragment）。 |
|
|
路由器的當前狀態包含了一棵由程式中啟用的路由構成的樹。它包含一些用於遍歷路由樹的快捷方法。 |
|
連結引數陣列 |
這個陣列會被路由器解釋成一個路由操作指南。我們可以把一個 |
|
路由元件 |
一個帶有 |
更多：
更多參考：