Angular 13返回上一页时如何保留页面选中数据与状态？

针对你的场景，这里有几个简便且适配Angular 13.2.3的方案：

方案一：利用Router的state参数传递状态 #

在跳转目标页面时，把源页面的选中状态和数据通过路由的state参数携带，返回时直接读取该状态恢复页面。

步骤： #

1. 跳转时携带状态：
   在源页面的跳转方法里，用router.navigate的第二个参数传入state：

   // 源页面组件
   import { Router } from '@angular/router';
   
   constructor(private router: Router) {}
   
   goToTargetPage(selectedData: any) {
     // 把需要保留的状态和数据存入state
     this.router.navigate(['/target-path'], {
       state: {
         selectedData: selectedData,
         // 可以添加其他需要保留的状态，比如选中项ID、筛选条件等
         filterConditions: this.currentFilters
       }
     });
   }
   

2. 返回时恢复状态：
   在目标页面的返回方法里直接调用history.back()，然后在源页面的ngOnInit或ngAfterViewInit中读取路由状态恢复：

   // 源页面组件
   ngOnInit() {
     // 读取路由状态
     const navigationState = window.history.state;
     if (navigationState?.selectedData) {
       // 恢复选中数据和状态
       this.selectedData = navigationState.selectedData;
       this.currentFilters = navigationState.filterConditions;
       // 这里可以根据恢复的数据重新设置页面选中状态，比如给复选框赋值等
     }
   }
   
   // 目标页面的返回方法
   goBack() {
     window.history.back();
   }
   

   这种方式不需要额外的全局存储，状态存在浏览器历史记录中，适合简单场景。

方案二：用单例Service持久化状态 #

创建一个全局Service来存储页面状态，源页面跳转前把状态存入Service，返回时从Service读取恢复。

步骤： #

1. 创建状态存储Service：

   // page-state.service.ts
   import { Injectable } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class PageStateService {
     private sourcePageState: any = null;
   
     saveSourcePageState(state: any) {
       this.sourcePageState = state;
     }
   
     getSourcePageState() {
       const state = this.sourcePageState;
       // 可选：读取后清空状态，避免重复恢复
       this.sourcePageState = null;
       return state;
     }
   }
   

2. 源页面跳转前保存状态：

   // 源页面组件
   import { PageStateService } from './page-state.service';
   import { Router } from '@angular/router';
   
   constructor(
     private router: Router,
     private pageStateService: PageStateService
   ) {}
   
   goToTargetPage(selectedData: any) {
     // 保存当前页面的状态
     this.pageStateService.saveSourcePageState({
       selectedData: selectedData,
       filterConditions: this.currentFilters
     });
     this.router.navigate(['/target-path']);
   }
   

3. 源页面初始化时恢复状态：

   // 源页面组件
   ngOnInit() {
     const savedState = this.pageStateService.getSourcePageState();
     if (savedState) {
       this.selectedData = savedState.selectedData;
       this.currentFilters = savedState.filterConditions;
       // 恢复页面选中状态
     }
   }
   
   // 目标页面返回方法
   goBack() {
     this.router.navigate(['/source-path']);
     // 或者用window.history.back()也可以
   }
   

   这种方式适合状态比较复杂，或者需要在多个页面间共享状态的场景，Service是Angular的标准做法，稳定性高。

方案三：启用路由复用策略（适合复杂页面） #

如果你的页面组件比较重，不想重新初始化，可以配置Angular的路由复用策略，让组件实例在路由切换时被保留，返回时直接复用。

简单实现： #

1. 创建复用策略类：

   // route-reuse-strategy.ts
   import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
   
   export class CustomRouteReuseStrategy implements RouteReuseStrategy {
     private storedRoutes = new Map<string, DetachedRouteHandle>();
   
     shouldDetach(route: ActivatedRouteSnapshot): boolean {
       // 指定需要复用的路由路径，比如源页面的路径
       return route.routeConfig?.path === 'source-path';
     }
   
     store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
       this.storedRoutes.set(route.routeConfig?.path || '', handle);
     }
   
     shouldAttach(route: ActivatedRouteSnapshot): boolean {
       return !!this.storedRoutes.get(route.routeConfig?.path || '');
     }
   
     retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
       return this.storedRoutes.get(route.routeConfig?.path || '') || null;
     }
   
     shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
       return future.routeConfig === curr.routeConfig;
     }
   }
   

2. 在AppModule中配置：

   // app.module.ts
   import { RouteReuseStrategy } from '@angular/router';
   import { CustomRouteReuseStrategy } from './route-reuse-strategy';
   
   @NgModule({
     providers: [
       { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
     ]
   })
   export class AppModule {}
   

   这种方式会完全保留组件实例，包括所有数据和状态，不需要手动恢复，但需要针对特定路由配置，适合复杂页面的场景。

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