Angular 15路由切换返回后数据丢失，如何保留数据并实现返回按钮？

下面给你几种解决路由切换后数据丢失的方法，根据你的场景选合适的：

1. 用共享Service缓存数据（最常用） #

Angular组件切换路由时会被销毁，把数据存在全局Service里是最稳妥的方式。

• 先写一个数据存储Service：

// data-storage.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataStorageService {
  // BehaviorSubject会保存最新值，订阅时能拿到当前数据
  private tableData$ = new BehaviorSubject<any[]>([]);
  public tableData = this.tableData$.asObservable();

  // 存储数据
  setTableData(data: any[]) {
    this.tableData$.next(data);
  }

  // 获取当前缓存的数据
  getCurrentTableData() {
    return this.tableData$.value;
  }
}

• 表格组件里调用API后把数据存进Service，初始化时先读缓存：

// table.component.ts
import { Component, OnInit } from '@angular/core';
import { DataStorageService } from './data-storage.service';
import { YourApiService } from './your-api.service';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent implements OnInit {
  tableData: any[] = [];

  constructor(
    private storageService: DataStorageService,
    private apiService: YourApiService
  ) {}

  ngOnInit() {
    const cachedData = this.storageService.getCurrentTableData();
    if (cachedData.length) {
      this.tableData = cachedData;
    } else {
      this.loadData();
    }
  }

  loadData() {
    this.apiService.getTableData().subscribe(res => {
      this.tableData = res;
      this.storageService.setTableData(res);
    });
  }
}

2. 用LocalStorage/SessionStorage持久化数据 #

如果需要刷新页面后数据也不丢，可以用浏览器的本地存储。

• 表格组件里修改加载逻辑：

// table.component.ts
ngOnInit() {
  const storedData = localStorage.getItem('tableData');
  if (storedData) {
    this.tableData = JSON.parse(storedData);
  } else {
    this.loadData();
  }
}

loadData() {
  this.apiService.getTableData().subscribe(res => {
    this.tableData = res;
    // 存进LocalStorage，SessionStorage是会话级的，关闭页面就没了
    localStorage.setItem('tableData', JSON.stringify(res));
  });
}

注意：别存敏感数据，存储大小有限制（约5MB）。

3. 自定义RouteReuseStrategy复用组件 #

如果想保留组件的完整状态（比如分页、筛选条件），可以让Angular缓存组件实例，不销毁。

• 写一个自定义的路由复用策略：

// custom-route-reuse.strategy.ts
import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private cache = new Map<string, DetachedRouteHandle>();

  // 指定要缓存的路由，比如你的表格路由path是'table'
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.routeConfig?.path === 'table';
  }

  // 缓存组件实例
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    if (route.routeConfig?.path) {
      this.cache.set(route.routeConfig.path, handle);
    }
  }

  // 回来时是否恢复缓存的组件
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig?.path && this.cache.has(route.routeConfig.path);
  }

  // 获取缓存的组件实例
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return this.cache.get(route.routeConfig?.path || '') || null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

• 在AppModule里注册这个策略：

// app.module.ts
import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse.strategy';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. 路由参数传递（仅适合小数据） #

如果数据量很小，也可以把数据转成JSON字符串通过路由参数传递，但别传大数据，会导致URL过长。

• 修改routerLink：

<button [routerLink]="['/home', { tableData: JSON.stringify(tableData) }]">
  <i class="bx bx-left-arrow-alt" id="icone"></i>
</button>

• 表格组件里从路由参数读取：

// table.component.ts
import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const dataParam = this.route.snapshot.paramMap.get('tableData');
  if (dataParam) {
    this.tableData = JSON.parse(dataParam);
  } else {
    this.loadData();
  }
}

注意：刷新页面后数据会丢，因为参数存在URL里。

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