Angular：用户跨模块跳转时如何清除localStorage中存储的对应搜索参数

核心需求匹配：仅在用户离开Claim模块的所有路由时清理搜索参数，模块内部跳转保留存储值，两种实现方案可选：

方案1：模块父路由组件生命周期清理（推荐） #

把所有Claim模块的子路由嵌套在同一个父路由布局组件下，利用父组件销毁时机自动清理存储值，逻辑完全封装在Claim模块内部，不污染全局代码。

1. 调整Claim模块路由配置（claim-routing.module.ts）

const routes: Routes = [
  {
    path: '',
    // 理赔模块统一父组件，所有子路由挂载在该组件下
    component: ClaimLayoutComponent,
    children: [
      { path: 'list', component: ClaimListComponent },
      { path: 'detail/:id', component: ClaimDetailComponent },
      // 其他Claim模块子路由
    ]
  }
]

2. 父组件ClaimLayoutComponent实现OnDestroy钩子

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-claim-layout',
  // 无额外布局需求的话直接放子路由出口即可
  template: `<router-outlet></router-outlet>`
})
export class ClaimLayoutComponent implements OnDestroy {
  ngOnDestroy(): void {
    // 替换为你实际存储搜索参数的localStorage key
    localStorage.removeItem('claimSearchOptions');
  }
}

当用户跳转至非Claim模块路由时，父组件会被Angular自动销毁，ngOnDestroy触发完成清理。

方案2：全局路由事件监听 #

如果不想调整现有路由结构，可以在根组件/核心服务中监听全局路由跳转事件，对比前后路由所属模块触发清理。

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, pairwise } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private router: Router) {
    this.router.events.pipe(
      // 仅过滤路由跳转完成事件
      filter((event): event is NavigationEnd => event instanceof NavigationEnd),
      // 配对返回前后两次路由跳转结果
      pairwise()
    ).subscribe(([prevRoute, currRoute]) => {
      // 替换为你实际的Claim模块路由前缀
      const isPrevInClaim = prevRoute.url.startsWith('/claim');
      const isCurrInClaim = currRoute.url.startsWith('/claim');
      // 前一个路由属于Claim模块，当前路由不属于，说明已离开模块
      if (isPrevInClaim && !isCurrInClaim) {
        localStorage.removeItem('claimSearchOptions');
      }
    })
  }
}

补充优化建议 #

如果你的Claim模块是懒加载模块，可以完全不用依赖localStorage，直接把搜索参数存在Claim模块专属的服务中：

懒加载模块的provider是模块级单例，仅在模块加载时实例化，模块卸载时服务实例会被自动销毁，天然满足「模块内跳转保留参数、离开模块自动清除」的需求，无需额外写清理逻辑。

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