Angular 12如何隐藏queryParams？求非参数跨页面动态传参方案

1. 共享服务（Service）传值 #

这是Angular中非父子组件传值的标准方案，通过单例服务存储数据，组件间注入服务实现数据读写。

实现步骤： #

• 创建单例共享服务：

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

@Injectable({ providedIn: 'root' })
export class DataShareService {
  // 用BehaviorSubject保证订阅时能拿到最新值
  private productIdSubject = new BehaviorSubject<number | null>(null);
  productId$ = this.productIdSubject.asObservable();

  setProductId(id: number): void {
    this.productIdSubject.next(id);
  }
}

• 跳转前的组件设置数据：

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

navigateToUpdate(runID: number, record: any): void {
  this.dataShareService.setProductId(record.productID);
  this.router.navigate([`/cbam-tools/stepper/update/${runID}`]);
}

• 目标组件获取数据：

import { Subscription } from 'rxjs';

export class UpdateStepperComponent implements OnInit, OnDestroy {
  private productIdSub!: Subscription;
  productId: number | null = null;

  constructor(private dataShareService: DataShareService) {}

  ngOnInit(): void {
    this.productIdSub = this.dataShareService.productId$.subscribe(id => {
      this.productId = id;
      // 执行后续业务逻辑
    });
  }

  ngOnDestroy(): void {
    // 销毁组件时取消订阅，避免内存泄漏
    this.productIdSub.unsubscribe();
  }
}

2. 路由状态（state）传值 #

Angular路由支持通过state参数传递数据，数据不会出现在URL中，存储在浏览器history.state对象里。

实现代码： #

• 跳转组件：

this.router.navigate([`/cbam-tools/stepper/update/${runID}`], {
  state: { productID: record.productID }
});

• 目标组件获取数据：

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

export class UpdateStepperComponent implements OnInit {
  productId: number | undefined;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 快照获取初始值
    this.productId = this.route.snapshot.state?.productID;
    // 监听state变化，适配浏览器前进后退场景
    this.route.paramMap.subscribe(() => {
      this.productId = window.history.state.productID;
    });
  }
}

注意：页面刷新后history.state会丢失，仅适用于临时传值场景。

3. 本地存储（LocalStorage/SessionStorage） #

如果需要数据在页面刷新后仍保留，可以用本地存储，注意仅存储非敏感数据（明文存储）。

实现代码： #

• 跳转前存储数据：

navigateToUpdate(runID: number, record: any): void {
  // SessionStorage为会话级，关闭标签页自动清除；LocalStorage长期保存
  sessionStorage.setItem('productID', record.productID.toString());
  this.router.navigate([`/cbam-tools/stepper/update/${runID}`]);
}

• 目标组件获取并清理数据：

ngOnInit(): void {
  const productIdStr = sessionStorage.getItem('productID');
  if (productIdStr) {
    this.productId = parseInt(productIdStr, 10);
    // 用完删除避免数据残留
    sessionStorage.removeItem('productID');
  }
}

方案对比 #

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