Angular：页面导航切换后如何保留变量修改后的值

这问题我之前做Angular项目时也碰到过！核心原因很简单：你的userData是组件的本地变量，当离开页面（组件被销毁）后，这个变量就被回收了，再次进入时ngOnInit又会重新请求服务数据，自然就回到初始状态了。下面给你几个实用的解决方案，按推荐程度排序：

方案1：用服务缓存数据（最推荐） #

Angular的服务是单例模式，只要应用没重启，服务里的数据就会一直保留。我们可以让服务负责缓存请求到的userData，组件从服务获取缓存数据，修改后再同步回服务的缓存。

修改你的DataService： #

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 DataService {
  // 用于缓存用户数据的私有变量
  private cachedUserData: any[] | null = null;

  constructor(private http: HttpClient) {}

  getAllData(): Observable<any> {
    // 如果已有缓存，直接返回缓存的Observable
    if (this.cachedUserData) {
      return of({ userData: this.cachedUserData });
    }
    // 没有缓存就发起请求，并把结果存入缓存
    return this.http.get('/your-api-endpoint').pipe(
      tap(response => {
        this.cachedUserData = response.userData;
      })
    );
  }

  // 提供方法让组件更新缓存数据
  updateCachedUserData(updatedData: any[]) {
    this.cachedUserData = updatedData;
  }
}

修改Home组件的代码： #

ngOnInit() {
  this.dataService.getAllData().subscribe(results => {
    // 浅拷贝一份数据，避免直接修改服务缓存的引用
    this.userData = [...results.userData];
  });
}

// 你的删除元素方法
removeItem(removedIndex: number) {
  this.userData.splice(removedIndex, 1);
  // 修改后同步更新服务的缓存
  this.dataService.updateCachedUserData([...this.userData]);
}

方案2：用BehaviorSubject维护全局状态 #

如果需要让多个组件共享并响应userData的变化，用BehaviorSubject是更好的选择。它会保存当前最新值，新订阅的组件能直接拿到最新状态。

修改DataService： #

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

@Injectable({ providedIn: 'root' })
export class DataService {
  // BehaviorSubject需要初始值，这里用空数组
  private userDataSubject = new BehaviorSubject<any[]>([]);
  // 暴露可观察对象，避免组件直接修改Subject
  public userData$: Observable<any[]> = this.userDataSubject.asObservable();

  constructor(private http: HttpClient) {}

  // 加载数据的方法，只在需要时调用
  loadAllData() {
    this.http.get('/your-api-endpoint').subscribe(response => {
      this.userDataSubject.next(response.userData);
    });
  }

  // 更新数据的方法
  updateUserData(updatedData: any[]) {
    this.userDataSubject.next(updatedData);
  }
}

修改Home组件的代码： #

ngOnInit() {
  // 检查当前Subject里有没有数据，没有的话再加载
  if (this.dataService.userData$.getValue().length === 0) {
    this.dataService.loadAllData();
  }
  // 订阅Subject获取最新数据
  this.dataService.userData$.subscribe(data => {
    this.userData = [...data];
  });
}

removeItem(removedIndex: number) {
  this.userData.splice(removedIndex, 1);
  this.dataService.updateUserData([...this.userData]);
}

方案3：用localStorage/sessionStorage持久化 #

如果需要页面刷新后也保留修改后的数据，可以用浏览器的本地存储。但注意不要存敏感信息，而且要处理数据序列化的问题。

修改Home组件的代码： #

ngOnInit() {
  // 先从localStorage读取保存的数据
  const savedUserData = localStorage.getItem('userData');
  if (savedUserData) {
    this.userData = JSON.parse(savedUserData);
  } else {
    // 没有保存的数据才请求服务
    this.dataService.getAllData().subscribe(results => {
      this.userData = results.userData;
      // 把数据存入localStorage
      localStorage.setItem('userData', JSON.stringify(this.userData));
    });
  }
}

removeItem(removedIndex: number) {
  this.userData.splice(removedIndex, 1);
  // 删除后更新localStorage
  localStorage.setItem('userData', JSON.stringify(this.userData));
}

提示：如果只需要会话期间保留数据，把localStorage换成sessionStorage即可，它会在关闭浏览器后自动清除。

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