# 获取路由参数 往往我们会通过定制访问的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) | |