Angular路由：如何在不暴露参数的情况下从URLA跳转至URLB

嘿，这个需求我之前也碰到过！想要跳转后只显示URLB但能拿到参数，又不能用skipLocation=true（因为会隐藏URL），给你两个靠谱的方案：

方案一：利用路由状态（State）传递参数 #

Angular的router.navigate支持通过state属性传递参数，这部分数据会存在浏览器的历史状态里，不会出现在URL上，而且跳转后URL会正常显示URLB。

在URLA的组件中跳转： #

this.router.navigate([URLB], { 
  state: { name: "erika" } 
});

在URLB的组件中获取参数： #

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

// 组件类里
constructor(private router: Router) {}

ngOnInit() {
  // 获取当前导航的状态数据
  const navigation = this.router.getCurrentNavigation();
  if (navigation?.extras.state) {
    this.name = navigation.extras.state['name'];
  }
}

⚠️ 注意：这种方式的参数只存在于当前导航的历史记录中，如果用户刷新URLB页面，状态数据会丢失，因为浏览器刷新后不会保留History API的状态。

方案二：使用共享服务传递参数 #

如果需要刷新页面后依然能获取到参数，那用共享服务是更稳妥的选择。通过单例服务来存储和传递参数，完全不会影响URL显示。

第一步：创建共享服务 #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataShareService {
  // 用BehaviorSubject来保存参数，确保订阅时能拿到最新值
  private nameSubject = new BehaviorSubject<string | null>(null);
  name$ = this.nameSubject.asObservable();

  setName(name: string) {
    this.nameSubject.next(name);
  }
}

在URLA的组件中存储参数并跳转： #

import { Router } from '@angular/router';
import { DataShareService } from './data-share.service';

constructor(
  private router: Router,
  private dataShareService: DataShareService
) {}

goToURLB() {
  // 先把参数存到服务里
  this.dataShareService.setName("erika");
  // 再跳转到URLB
  this.router.navigate([URLB]);
}

在URLB的组件中获取参数： #

import { DataShareService } from './data-share.service';

constructor(private dataShareService: DataShareService) {}

ngOnInit() {
  // 订阅服务中的参数
  this.dataShareService.name$.subscribe(name => {
    if (name) {
      this.name = name;
    }
  });
}

这个方案的优势是刷新页面也能保留参数，因为服务是全局单例的，只要应用没重启，参数就会存在（如果需要持久化还可以结合localStorage，按需扩展即可）。

你可以根据自己的需求选这两个方案里的一个，亲测都能用！

内容的提问来源于stack exchange，提问作者poopp