Angular 2+路由中如何保存页面上下文？

当然可以保存页面上下文啦！针对你说的这个场景，我给你整理了几种Angular里常用的解决方案，都能避免返回列表页时重复发起请求：

核心思路是把车辆列表数据存在一个全局的单例服务里，第一次请求后就把数据缓存起来，下次进入/cars组件时先检查缓存，有数据就直接复用，没有再发请求。

首先创建一个车辆服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class CarService {
  // 用这个变量存缓存的列表数据
  private carListCache: any[] | null = null;

  constructor(private http: HttpClient) {}

  getCarList(): Observable<any[]> {
    // 先检查缓存是否存在
    if (this.carListCache) {
      return of(this.carListCache); // 直接返回缓存数据
    }
    // 没有缓存就发起请求，同时把数据存到缓存里
    return this.http.get<any[]>('/api/cars').pipe(
      tap(data => this.carListCache = data)
    );
  }

  // 可选：如果需要手动刷新列表（比如新增车辆后），可以加这个方法清空缓存
  clearCarCache(): void {
    this.carListCache = null;
  }
}

然后在/cars组件里调用这个服务：

import { Component, OnInit } from '@angular/core';
import { CarService } from './car.service';

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

  constructor(private carService: CarService) {}

  ngOnInit(): void {
    this.carService.getCarList().subscribe(data => {
      this.carList = data;
    });
  }
}

如果不仅要保存列表数据，还要保留滚动位置这类临时状态，可以在跳转到详情页时，把当前页面的状态存在路由的state参数里，返回时再取出来复用。

在/cars组件里跳转详情页的逻辑：

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

// ... 组件内的方法
goToCarDetail(carId: number): void {
  this.router.navigate(['/details', carId], {
    // 把当前列表数据和滚动位置存到路由state里
    state: { 
      carList: this.carList, 
      scrollTop: window.scrollY 
    }
  });
}

返回/cars组件时，在ngOnInit里读取state：

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

// ... 组件内的ngOnInit
ngOnInit(): void {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation?.extras.state;
  
  if (state && state.carList) {
    // 复用缓存的列表数据
    this.carList = state.carList;
    // 恢复之前的滚动位置
    setTimeout(() => window.scrollTo(0, state.scrollTop));
  } else {
    // 没有缓存时再发起请求
    this.carService.getCarList().subscribe(data => this.carList = data);
  }
}

⚠️ 注意：这种方式是临时的，用户刷新页面后路由state就会丢失，适合不需要持久化的场景。

如果希望用户刷新页面后，列表数据依然存在，可以把缓存存在localStorage或sessionStorage里，还可以设置缓存有效期。

修改CarService的getCarList方法：

getCarList(): Observable<any[]> {
  const cachedData = localStorage.getItem('carList');
  const cacheTime = localStorage.getItem('carListCacheTime');
  const now = Date.now();
  // 设定缓存有效期为1小时（3600000毫秒）
  const cacheValidDuration = 3600000;

  // 检查缓存是否存在且未过期
  if (cachedData && cacheTime && (now - parseInt(cacheTime)) < cacheValidDuration) {
    return of(JSON.parse(cachedData));
  }

  // 缓存无效时发起请求，并更新本地存储
  return this.http.get<any[]>('/api/cars').pipe(
    tap(data => {
      localStorage.setItem('carList', JSON.stringify(data));
      localStorage.setItem('carListCacheTime', now.toString());
    })
  );
}

⚠️ 注意：本地存储会把数据存在用户浏览器里，不要用来存敏感信息。

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