Angular - 路由参数

typescript

使用 Angular 的路由功能，可以实现在不同页面之间传递参数，从而实现更加灵活的页面跳转和数据传递。本文将介绍如何在 Angular 中使用路由参数，并通过一个案例代码来演示。

什么是路由参数

在 Angular 中，路由参数是指在页面跳转时，通过 URL 中的参数来传递数据。路由参数可以是任意类型的数据，比如字符串、数字、对象等，用于在跳转后的页面中显示或处理相应数据。

如何使用路由参数

在 Angular 中，使用路由参数非常简单。首先，在定义路由时，需要在路由路径中添加参数占位符。例如，我们可以定义一个带有参数的路由路径如下：

typescript
const routes: Routes = [
  { path: 'user/:id', component: UserComponent }
];

在上述示例中，user/:id 表示一个带有参数的路由路径，其中 :id 是一个占位符，用于接收传递的参数。

接下来，在组件中获取路由参数。可以通过依赖注入的方式来获取路由参数。首先，在组件的构造函数中注入 ActivatedRoute 服务，并在 ngOnInit 生命周期钩子中获取路由参数。示例代码如下：

typescript
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-user',
  template: <code>
    <h1>User DetAIls</h1>
    
User ID: {{ userId }}
  </code>
})
export class UserComponent implements OnInit {
  userId: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.userId = this.route.snapshot.params['id'];
  }
}

在上述示例中，我们通过注入 ActivatedRoute 服务，并在 ngOnInit 方法中使用 route.snapshot.params 来获取路由参数。这里的 params 是一个键值对对象，其中键是路由路径中的参数名，值是传递的参数值。

案例演示

假设我们有一个用户列表页面，点击每个用户可以跳转到对应的用户详情页面，并在详情页面展示用户的详细信息。我们可以通过路由参数来传递用户的 ID，从而在详情页面中获取并展示对应用户的信息。

首先，我们需要定义两个组件：UserListComponent 和 UserComponent。在 UserListComponent 中，展示用户列表，并为每个用户添加一个链接，链接指向用户详情页面。在 UserComponent 中，根据路由参数获取用户 ID，并展示对应用户的详细信息。

typescript
// user-list.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-user-list',
  template: <code>
    <h1>User List</h1>
    <ul>
      <li *ngFor="let user of users">
        {{ user.name }}
      </li>
    </ul>
  </code>
})
export class UserListComponent {
  users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
}
// user.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-user',
  template: <code>
    <h1>User DetAIls</h1>
    
<img src="https://img.izhida.com/topic/0a40e3c91a3a55c9a37428c6d194d0e5.jpg" alt="AI"><br>AI
User ID: {{ userId }}
  </code>
})
export class UserComponent implements OnInit {
  userId: string;
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    this.userId = this.route.snapshot.params['id'];
  }
}

在上述示例中，UserListComponent 中使用了 *ngFor 指令来循环渲染用户列表，并为每个用户的链接绑定了 routerLink 属性，该属性的值是一个数组，第一个元素是目标路由路径，第二个元素是要传递的参数值。

在 UserComponent 中，我们注入了 ActivatedRoute 服务，并在 ngOnInit 方法中使用 route.snapshot.params 来获取路由参数的值，并将其赋值给 userId 属性。

通过使用 Angular 的路由参数功能，我们可以方便地在不同页面之间传递参数。在定义路由时，需要在路由路径中添加参数占位符，然后在组件中使用 ActivatedRoute 服务来获取路由参数的值。通过案例代码的演示，我们了解了如何在 Angular 中使用路由参数来展示不同用户的详细信息。

希望本文对你理解和使用 Angular 的路由参数有所帮助！