# 獲取路由參數 往往我們會通過定制訪問的URL來表明當前要操作（編輯、查看、刪除、凍結等一系列操作）的信息，比如訪問http://localhost:4200/edit/1來表明編輯id為1的用戶，如果你當前正在使用其它系統，也必然會有這樣的實例。 比如我們在思否中來學習某一篇文章，或是修改某篇文章；在比如在京東上瀏覽某個商品，都會存在這些關鍵字： 思否：  京東  那么如何在Angular的組件中來獲取到這些信息呢？ ## 定制路由 我們首先為Edit組件定制一個特定的路由，以期在訪問http://localhost/edit/1, http://localhost/edit/2 等地址時顯示Edit組件： ```typescript --- a/first-app/src/app/app-routing.module.ts +++ b/first-app/src/app/app-routing.module.ts @@ -1,11 +1,16 @@ import {NgModule} from '@angular/core'; import {Routes, RouterModule} from '@angular/router'; import {AddComponent} from './add/add.component'; +import {EditComponent} from './edit/edit.component'; const routes: Routes = [ { path: 'add', component: AddComponent + }, + { + path: 'edit/:id', ?? + component: EditComponent } ]; ``` - 使用了`:xx`關鍵字來定義一個路由參數名為`xx`的路由。 使用`ng s`來啟動項目，輸入不同的`url`來查看是否能夠成功的顯示編輯組件： >  > [warning] 注意，在這里無法使用`ng t` 在父App組件對應的模板文件中的`<router-outlet></router-outlet>`會根據當前的路由值來填充不同的組件，比如訪問http://localhost:4200/add時，`<router-outlet></router-outlet>`的位置將由Add組件來填充；而此時訪問http://localhost:4200/edit/1時，`<router-outlet></router-outlet>`的位置將由Edit組件來填充。 ## ActivedRouter 路由信息定義后，可以通過Angular內置模塊RouterModule中的ActivedRouter來快速獲取到路由參數。在Edit組件中預使用ActivedRouter則需要先后完成以下兩個步驟： 1. 在Edit組件中注入ActivedRouter ```typescript +++ b/first-app/src/app/edit/edit.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {ActivatedRoute} from '@angular/router'; @Component({ selector: 'app-edit', @@ -7,7 +8,8 @@ import { Component, OnInit } from '@angular/core'; }) export class EditComponent implements OnInit { - constructor() { } + constructor(private activeRoute: ActivatedRoute) { + } ngOnInit(): void { } ``` 2. 在Edit組件所在的App模塊中imports能提供ActivedRouter的RouterModule ```typescript +++ b/first-app/src/app/app.module.ts @@ -7,6 +7,7 @@ import {HttpClientModule} from '@angular/common/http'; import {AddComponent} from './add/add.component'; import {FormsModule} from '@angular/forms'; import {EditComponent} from './edit/edit.component'; +import {RouterModule} from '@angular/router'; @NgModule({ @@ -19,7 +20,8 @@ import {EditComponent} from './edit/edit.component'; BrowserModule, AppRoutingModule, HttpClientModule, - FormsModule + FormsModule, + RouterModule ], providers: [], bootstrap: [AppComponent] ``` 此時訪問http://localhost:4200/edit/1時控制臺不報錯，說明引入成功。  ## 獲取參數 接下來，我們如下在`ngOnit`中獲取`activeRoute`所攜帶的路由參數信息： ``` +++ b/first-app/src/app/edit/edit.component.ts @@ -12,6 +12,8 @@ export class EditComponent implements OnInit { } ngOnInit(): void { + const id = this.activeRoute.snapshot.params.id; ?? + console.log('獲取到的路由參數id值為', id); } } ``` 路由參數位于`this.activeRoute.snapshot.params`，`id`匹配我們在`src/app/app-routing.module.ts`中定義的`:id`  ## 本節作業 1. 嘗試將路由參數中的`id`換成其它關鍵字，并在組件嘗試獲取。 2. 嘗試使用`console.log(this.`activeRoute`)`在控制臺中打印一下組件中的`activeRoute`看看該對象中都存在哪些屬性及方法。 | 名稱 | 地址 | 備注 | | ------------------ | ------------------------------------------------------------ | ---- | | 路由配置 | [https://www.angular.cn/guide/router#configuration](https://www.angular.cn/guide/router#configuration) | | | 訪問查詢參數和片段 | [https://www.angular.cn/guide/router#accessing-query-parameters-and-fragments](https://www.angular.cn/guide/router#accessing-query-parameters-and-fragments) | | | ActivatedRoute | [https://www.angular.cn/api/router/ActivatedRoute](https://www.angular.cn/api/router/ActivatedRoute) | | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.4.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.4.2.zip) | |