Angular路由：如何保留子路由参数？附路由配置示例

嘿，针对你给出的Angular路由结构，要保留unit/:serialnumber这个父路由的参数给子路由使用，其实有几种简单直接的方法，我给你拆解一下：

1. 在子路由组件中直接获取父路由参数 #

这是最常用的方式，因为你的子路由（比如realtime、manager）都是嵌套在unit/:serialnumber下面的，所以子组件可以通过ActivatedRoute的parent属性拿到父路由的参数。

举个例子，在UnitRealtimeComponent里这么写：

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

@Component({
  selector: 'app-unit-realtime',
  templateUrl: './unit-realtime.component.html'
})
export class UnitRealtimeComponent implements OnInit {
  serialNumber?: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 一次性获取参数（适合参数不会在同一路由下变化的场景）
    this.serialNumber = this.route.parent?.snapshot.paramMap.get('serialnumber');
    
    // 如果参数可能动态更新（比如同页面切换不同设备），就用订阅的方式
    this.route.parent?.paramMap.subscribe(params => {
      this.serialNumber = params.get('serialnumber');
      // 这里可以触发数据刷新等操作
    });
  }
}

2. 路由跳转时保留参数 #

如果需要在子路由之间跳转（比如从realtime跳到history），可以用Router的navigate方法配合relativeTo来自动继承父路由参数：

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

@Component({
  selector: 'app-unit-realtime',
  templateUrl: './unit-realtime.component.html'
})
export class UnitRealtimeComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  goToHistory(): void {
    // 用相对路径跳转，会自动保留父路由的serialnumber参数
    this.router.navigate(['../history'], { relativeTo: this.route });
  }
}

在模板里用routerLink的话更简单，直接写相对路径就行：

<!-- 在UnitComponent的模板中，跳转到子路由时自动继承父参数 -->
<div class="nav-links">
  <a [routerLink]="['realtime']">实时数据</a>
  <a [routerLink]="['history']">历史记录</a>
  <a [routerLink]="['manager']">设备管理</a>
</div>

3. 额外说明：路由参数的继承性 #

Angular的嵌套路由中，父路由的参数默认是可以被所有子路由访问到的，不需要在子路由配置里重复定义serialnumber参数。只要你通过正确的嵌套关系跳转，参数就会被自动保留，核心就是利用ActivatedRoute的parent属性或者相对路由跳转。

内容的提问来源于stack exchange，提问作者Rui Sebastião