Angular路由跳转后恢复关联表单数据及下拉选项状态

方案一：单例服务存储完整状态（推荐） #

利用Angular根注入服务的单例特性，直接存储表单相关的选项列表、选中值和表单快照，路由跳转后组件实例保留时可直接读取复用。

• 1. 创建状态存储服务

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FormStateService {
  // 存储大学下拉选项
  universityOptions: any[] = [];
  // 选中的大学ID
  selectedUniversityId: string | number | null = null;
  // 对应课程下拉选项
  courseOptions: any[] = [];
  // 表单值快照
  formValue: any = null;
}

• 2. 组件中同步状态到服务
     在获取选项、选择大学、表单值变化时，实时把数据同步到服务：

// 获取大学选项后
this.universityOptions = fetchedUniversities;
this.formStateService.universityOptions = fetchedUniversities;

// 选择大学并获取课程后
this.selectedUniversityId = selectedId;
this.courseOptions = fetchedCourses;
this.formStateService.selectedUniversityId = selectedId;
this.formStateService.courseOptions = fetchedCourses;

// 表单值更新时（或路由离开前）
this.formStateService.formValue = this.myForm.value;

• 3. 路由返回时恢复状态
     在组件初始化钩子中读取服务状态，恢复表单和下拉选项：

ngOnInit(): void {
  // 恢复大学选项
  if (this.formStateService.universityOptions.length) {
    this.universityOptions = this.formStateService.universityOptions;
  }

  // 恢复课程选项与表单值
  if (this.formStateService.selectedUniversityId) {
    this.selectedUniversityId = this.formStateService.selectedUniversityId;
    this.courseOptions = this.formStateService.courseOptions;
    this.myForm.patchValue(this.formStateService.formValue);
  }
}

方案二：服务+本地存储双备份（兜底方案） #

如果需要应对意外场景（比如组件实例被销毁的极端情况），可以在服务中结合本地存储做状态备份，优先读取服务状态，服务为空时读取本地数据。

• 1. 扩展服务的本地存储能力

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FormStateService {
  private readonly STORAGE_KEY = 'university_course_form_state';

  // 原有状态属性
  universityOptions: any[] = [];
  selectedUniversityId: string | number | null = null;
  courseOptions: any[] = [];
  formValue: any = null;

  // 保存状态到本地存储
  saveToLocalStorage(): void {
    const state = {
      universityOptions: this.universityOptions,
      selectedUniversityId: this.selectedUniversityId,
      courseOptions: this.courseOptions,
      formValue: this.formValue
    };
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(state));
  }

  // 从本地存储加载状态
  loadFromLocalStorage(): void {
    const savedState = localStorage.getItem(this.STORAGE_KEY);
    if (!savedState) return;

    const parsedState = JSON.parse(savedState);
    this.universityOptions = parsedState.universityOptions;
    this.selectedUniversityId = parsedState.selectedUniversityId;
    this.courseOptions = parsedState.courseOptions;
    this.formValue = parsedState.formValue;
  }
}

• 2. 组件中配合使用

// 路由离开前（或组件销毁前）保存到本地
@HostListener('window:beforeunload')
onBeforeUnload(): void {
  this.formStateService.saveToLocalStorage();
}

ngOnInit(): void {
  // 先读服务状态，为空则从本地加载
  if (!this.formStateService.universityOptions.length) {
    this.formStateService.loadFromLocalStorage();
  }

  // 恢复组件内状态
  this.universityOptions = this.formStateService.universityOptions;
  this.selectedUniversityId = this.formStateService.selectedUniversityId;
  this.courseOptions = this.formStateService.courseOptions;
  if (this.formStateService.formValue) {
    this.myForm.patchValue(this.formStateService.formValue);
  }
}

核心注意事项 #

• 因为你已能区分页面刷新和路由跳转，路由跳转时组件实例保留的情况下，方案一完全足够，无需本地存储；
• 不要直接存储FormGroup对象，仅存储选项列表、选中ID和表单值快照，避免序列化问题；
• 如果使用RouteReuseStrategy复用组件实例，组件自身的变量状态会自动保留，但服务方案更通用，不受路由复用策略限制。

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