Angular 中的路由与参数处理

在 Angular 中，路由和参数处理是构建单页应用（SPA）或复杂企业应用时的重要组成部分。理解如何重定向用户和检索参数对于有效管理路由至关重要。本文将介绍 Angular 中的几种常见路由处理方式，包括基本导航、程序化导航、参数检索等。

一. 使用 RouterLink 指令进行简单导航

RouterLink 指令是 Angular 中最简单的导航方式，它直接用于模板中，帮助构建带有动态参数的 URL。

<a [routerLink]="['/employee', employee.id]">查看详情</a>

解释：

• employee.id 被附加到 /employee 路由上，形成类似 /employee/123 的动态 URL。当模板中已知路由参数时，这是一个方便的导航方式。

二. 使用 Router 进行程序化导航

对于更复杂的场景，例如需要根据业务逻辑或条件操作进行导航，可以使用 Angular 的 Router 服务进行程序化导航。

import { Router } from '@angular/router';

constructor(private router: Router) {}

viewEmployeeDetails(employeeId: number) {
  this.router.navigate(['/employee', employeeId]);
}

解释：

• navigate() 方法接受一个数组，第一个元素是路由路径，后续元素是路由参数。

三. 使用 ActivatedRoute 检索参数

一旦导航到包含参数的路由中，通常需要在组件中检索这些参数。Angular 提供了 ActivatedRoute 服务来实现这一目的。

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  const employeeId = this.route.snapshot.paramMap.get('id');
  console.log('员工 ID:', employeeId);
}

解释：

• snapshot.paramMap.get('id') 从路由中检索 id 参数。这是一个同步方法，只在组件创建时获取参数值。

四. 使用 Observables 进行动态参数检索

虽然 snapshot 适用于简单场景，但 Angular 应用程序通常需要动态处理路由变化而不重新创建组件。这时，可以使用 paramMap 作为 Observable。

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
  this.route.paramMap.subscribe(params => {
    const employeeId = params.get('id');
    console.log('员工 ID:', employeeId);
  });
}

解释：

• paramMap.subscribe() 确保每当 id 参数发生变化时，新值将被记录或处理。这适用于需要响应路由变化的组件。

五. 结合查询参数进行导航

有时，你可能希望在导航到路由时通过查询参数传递附加信息。Angular 的 Router 服务允许结合路由参数和查询参数。

this.router.navigate(['/employee', employeeId], { queryParams: { ref: 'dashboard' } });

解释：

• 这种导航将直接转到 /employee/123?ref=dashboard，其中 123 是路由参数，ref=dashboard 是查询参数。

检索查询参数：

this.route.queryParams.subscribe(params => {
  const ref = params['ref'];
  console.log('来源:', ref);
});

六. 表单提交后的重定向

另一个常见的用例是表单提交或操作完成后的重定向。

onSubmit() {
  // 假设表单提交成功
  this.router.navigate(['/employee', newEmployeeId]);
}

解释：

• 在表单成功提交后，用户将被重定向到指定路由。

七. 使用守卫处理复杂重定向

Angular 还支持使用路由守卫处理复杂的重定向场景。守卫可以拦截导航并根据特定条件重定向用户。

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    if (isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

解释：

• 如果 isLoggedIn() 函数返回 false，用户将被重定向到 /login 路由，从而防止未授权访问。

八.结论

在 Angular 中进行路由和参数处理是构建动态且用户友好的应用程序的基本要素。无论是使用简单的 RouterLink、程序化导航，还是复杂的重定向逻辑，Angular 都提供了处理各种路由场景的工具。