15 路由与导航之路由参数

在前一章中，我们学习了如何在 Angular 中配置路由，为我们的应用提供导航功能。在本章中，我们将深入探讨如何处理路由参数，以便为路由传递信息和状态。

路由参数简介

路由参数是我们在应用中的特定路由中传递数据的一种方式。通过路由参数，我们可以在不同的 URL 之间传递信息，例如用户 ID、产品 ID 等，从而在接收组件中使用这些参数。

定义路由参数

在 Angular 中，我们可以在路由配置中定义路由参数。以下是一个简单的例子：

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

在上面的代码中，user/:id 定义了一个路由，当访问 /user/1 时，:id 就会被替换为 1，这就是我们的路由参数。

获取路由参数

要在组件中获取这些路由参数，我们需要使用 Angular 的 ActivatedRoute 模块。以下是如何在 UserComponent 中获取路由参数的示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `
    <h2>User ID: {{ userId }}</h2>
  `
})
export class UserComponent implements OnInit {
  userId: string | null = null;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 获取路由参数
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('id');
    });
  }
}

在上面的代码中，我们注入了 ActivatedRoute，并通过 paramMap 观察者来获取路由参数。在 ngOnInit() 生命周期钩子中，我们将参数值赋给 userId 变量。

使用路由参数

一旦我们获取到了路由参数，就可以根据这些参数来更新组件的内容。例如，我们可以使用 userId 来从服务器请求用户信息并展示在模板中。

以下是一个简单的更新示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user',
  template: `
    <h2>User ID: {{ userId }}</h2>
    <div *ngIf="user">
      <p>Name: {{ user.name }}</p>
      <p>Email: {{ user.email }}</p>
    </div>
  `
})
export class UserComponent implements OnInit {
  userId: string | null = null;
  user: any; // 用户数据的类型可以根据具体情况定义

  constructor(private route: ActivatedRoute, private userService: UserService) {}

  ngOnInit(): void {
    this.route.paramMap.subscribe(params => {
      this.userId = params.get('id');
      this.loadUserData(this.userId);
    });
  }

  loadUserData(id: string | null): void {
    if (id) {
      this.userService.getUserById(id).subscribe(data => {
        this.user = data;
      });
    }
  }
}

在这个例子中，我们添加了一个 UserService 来通过用户 ID 获取用户数据，并在模板中展示这些信息。

路由查询参数

除了路由参数，Angular 还支持查询参数，它们以键值对的形式附加在 URL 的末尾。查询参数通常用于过滤、排序等功能。例如，/users?sort=asc。

我们可以在路由中使用 queryParamMap 来获取这些参数：

this.route.queryParamMap.subscribe(params => {
  const sortOrder = params.get('sort');
});

小结

在本章中，我们深入讲解了 Angular 路由参数的定义、获取和使用方式。通过使用路由和查询参数，我们可以在应用中实现动态导航，增强用户体验。在下一章中，我们将继续探讨服务与依赖注入，为我们的应用提供更强大的功能。

通过本章的学习，希望你能够灵活使用路由参数，为你的 Angular 应用添加更多的动态导航功能！