Angular中ActivatedRoute与Router原理解析

Angular中ActivatedRoute与Router详解：路由服务核心用法

在Angular应用开发中，ActivatedRoute与Router这两个路由服务是日常开发中使用频率最高的核心工具。它们提供了多种方法和属性，用于查看和操控当前页面的路由状态。许多初学者容易混淆二者的职责，但只要理解了它们各自的定位，使用起来就会更加得心应手。

ActivatedRoute：获取当前路由状态与参数

简而言之，ActivatedRoute是一个承载当前激活路由状态的对象——路由参数、查询参数以及其他与当前路由相关的数据都包含在其中。它相当于路由事件的“数据容器”，负责收集导航过程中的静态路径、动态参数、查询字符串以及片段（Fragment）等信息。

举个例子，假设我们有这样一条路由配置：

{ path: 'product/:id', component: ProductDetailComponent }

在组件中，通过依赖注入获得ActivatedRoute实例后，可以方便地获取id参数。最常用的方法是通过快照对象（snapshot）来读取参数：

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-product-detail',
  template: 'Product Details Component'
})
export class ProductDetailComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}
  ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('id');
    // ...
  }
}

注意，snapshot.paramMap.get('id')返回的是字符串，使用加号运算符可以将其转换为数字类型，这是Angular开发中常见的写法。

然而，快照方式仅适用于参数固定不变的场景。如果同一组件需要响应URL动态变化（例如从/product/1导航到/product/2，组件并未被销毁重建），则必须订阅paramMap这个可观察对象：

this.route.paramMap.subscribe(params => {
  const id = +params.get('id');
  // ...
});

这样一来，每当参数发生变化时，回调函数就会触发，组件能够实时更新数据，避免停留在旧数据上。

Router：导航系统的调度中枢

而Router则是整个导航系统的“调度中枢”。它提供了编程式API，支持前进、后退、跳转等操作，并保留了完整配置的灵活性。可以将其视为一个抽象核心：它接收输入的URL，依据预先配置的路由规则进行匹配，最终渲染出对应的组件。

在Angular项目中，路由器是NgModule的引导项之一。初次配置可能略显复杂，但一旦熟悉基本模式，便会觉得它非常直观。

下面展示一个典型的路由配置：

// app-routing.module.ts file
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductListComponent },
  { path: 'products/:id', component: ProductDetailComponent }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

此配置定义了三个路由：空路径（首页）、产品列表页、以及包含参数的产品详情页。每个路径均绑定了一个组件。

接着，在模板中使用routerLink指令声明导航链接：

Home
Product List


    

        {{ product.name }}
    


Product Detail
{{ product }}

当用户点击链接时，路由器根据路径匹配规则加载对应组件，并在router-outlet指定的位置进行动态渲染。整个过程流畅且优雅。

总结：ActivatedRoute提供当前路由的“情报信息”，Router则负责导航的“调度方向”。将二者配合使用，就能在Angular中轻松处理各种路由场景。