使用 ActivatedRoute 与 AcitivatedRouteSnapshot 访问路线参数
介绍
我们经常需要获取路由参数，以便根据该参数使组件动态化。在本指南中，我们将学习如何从 URL 中提取数据或参数，包括几种不同的方法。
我们将介绍
- 需要从 URL 获取参数
- 如何在路由路径中创建动态参数
- 如何从 URL 中提取参数
- 如何使用ActivatedRoute提取参数
- 如何使用ActivatedRouteSnapshot提取参数
需要从 URL 获取参数
如果您已经在 app-routing.module.ts 中定义了路线路径，那么为什么还需要动态路径？
假设您有一个网格格式的学生列表，如下图所示。
如您所见，网格模板上有学生的姓名、标准和部门，如果您需要查看学生的更多数据，可以单击“阅读更多”。
用户点击“阅读更多”后，您将显示一个包含数据库中数据的查看或编辑页面。在构建页面时，您不知道学生 ID，因此无法访问 API （应用程序接口）并将其余学生数据提供给查看或编辑页面。
你需要将学生 ID 存储在某个地方。但是存储在哪里呢？
你可能认为你可以使用 observable 来实现这一点。确实可以。但它有一些限制。例如，刷新页面后你的数据将会丢失。
因此最好在路由参数中发送学生 ID，并在ngOnInit()方法中获取该参数，这是 Angular 中的生命周期钩子之一。
现在清楚了为什么以及在何处在路由路径中使用动态参数。那么让我们继续看看如何在路由路径中创建动态参数，以及在组件中提取该参数的不同选项是什么。
在路由路径中创建动态参数
为了提取参数，需要在路由路径中制作动态参数，这样才能通过参数名提取参数的值。
不明白？别担心！我会通过一个例子来解释。
首先，我们将创建一个组件。
ng g c First --skipTests=true
现在我们需要配置 app-routing.module.ts。我们创建一个具有动态参数的路由路径，该参数将显示在 HTML 中。
应用程序.路由.模块.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
const routes: Routes = [
{
path: 'first/:parameter',
component: FirstComponent,
},
{
path: "",
redirectTo: '/first/1',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
现在我们的 app-routing.module.ts 已经准备好配置，是时候提取动态参数的值并将其显示在 HTML 页面上了。
我们将通过两种方式提取动态参数：使用ActivatedRoute和ActivatedRouteSnapshot。
从 URL 中提取参数
现在我们将在配置了路由/first/:parameter 的FirstComponent中提取参数。
首先，我们需要为ActivatedRoute和ActivatedRouteSnapshot创建ActivatedRoute实例。我们将在FirstComponent的构造函数中创建一个实例。
为了查看ActivatedRoute和ActivatedRouteSnapshot之间的区别，我们将创建另一个Router实例来更改路由运行时。
使用 ActivatedRoute 提取参数
为了提取参数，我们需要订阅ActivatedRoute的params变量。以下代码片段显示了此订阅。
**first.component.ts**
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
@Component({
selector: 'app-first',
templateURL: './first.component.html',
styleURLs: ['./first.component.scss']
})
export class FirstComponent implements OnInit {
public parameterValue: string;
constructor(
private _router: Router,
private _activatedRoute: ActivatedRoute
) { }
ngOnInit() {
this._activatedRoute.params.subscribe(parameter => {
this.parameterValue = parameter.parameter
this._router.navigate(['first/4'])
this.parameterValue = parameter.parameter
})
}
}
上面的代码片段显示我们已经创建了Router和ActivatedRouter的实例，正如我们所讨论的。在ngOnInit()生命周期钩子中，我们必须订阅ActivatedRoute的params变量。
获取参数值后，我们动态地改变路由或导航的值，并将参数值存储在parameterValue变量中。它将显示在FirstComponent的HTML中。
**first.component.html**
<h1>{{parameterValue}}</h1>
现在是时候运行代码并在浏览器中查看输出了。
如你所见，我们得到了在运行时更改的参数的新值。我们的参数值已从1更改为4。这意味着它从起始值更改为新值。
现在让我们使用ActivatedRouteSnapshot提取值。
使用 ActivatedRouteSnapshot 提取参数
**first.component.ts**
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router';
@Component({
selector: 'app-first',
templateURL: './first.component.html',
styleURLs: ['./first.component.scss']
})
export class FirstComponent implements OnInit {
public parameterValue: string;
constructor(
private _router: Router,
private _activatedRoute: ActivatedRoute
) { }
ngOnInit() {
this.parameterValue = this._activatedRoute.snapshot.params.parameter
this._router.navigate(['first/4'])
this.parameterValue = this._activatedRoute.snapshot.params.parameter
}
}
在上面的代码片段中，ActivatedRoute的快照变量是ActivateRouteSnapshot的实例。
我们做的事情和在ActivatedRoute中做的一样。我们获取路由的动态参数的值，将其值存储在名为paramterValue的变量中，并将其显示在 HTML 中。
现在是时候使用此配置运行应用程序并查看输出了。
如您所见，我们在parameterValue变量中获得了相同的值，但是我们的路线已从first / 1更改为first / 4。
我们没有得到改变的参数的值。这就是ActivatedRoute和ActivatedRouteSnapshot之间的区别。在ActivatedRouteSnapshot中，我们的组件和路由中的值不同步。
结论
感谢您阅读本指南。希望您喜欢它。现在您已经清楚了解了在何处使用ActivatedRoute和ActivatedRouteSnapshot。如果您有兴趣了解有关它们的更多信息，可以访问此处。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~