如何实现Angular表单在页面跳转返回后保留已填值

以下是几种常用的可落地实现方案：

方法1：使用Angular单例服务（Service）存储（最常用轻量方案） #

Angular服务默认是全局单例，路由跳转不会销毁服务实例，适合中小项目使用：

• 第一步：创建共享存储服务
  执行CLI命令生成服务：ng generate service services/form-storage
• 第二步：在服务中实现数据读写逻辑

  import { Injectable } from '@angular/core';
  import { FormGroup } from '@angular/forms';
  
  @Injectable({ providedIn: 'root' })
  export class FormStorageService {
    private savedFormValue: Record<string, any> = {};
  
    // 跳转前保存表单数据
    saveFormData(form: FormGroup): void {
      this.savedFormValue = form.value;
    }
  
    // 返回表单页时读取存储的数据
    getSavedFormData(): Record<string, any> {
      return this.savedFormValue;
    }
  
    // 表单提交完成后可调用清空存储
    clearFormData(): void {
      this.savedFormValue = {};
    }
  }
  

• 第三步：表单页组件对接存储逻辑

  import { FormStorageService } from '../services/form-storage.service';
  
  export class FormPageComponent implements OnInit {
    userForm: FormGroup;
  
    constructor(
      private formStorage: FormStorageService,
      private router: Router
    ) {}
  
    ngOnInit(): void {
      // 初始化你的表单控件
      this.userForm = new FormGroup({
        // 此处补充你的表单字段定义
      });
      // 页面加载时如果存在已存数据直接回填
      const savedData = this.formStorage.getSavedFormData();
      if (Object.keys(savedData).length) {
        this.userForm.patchValue(savedData);
      }
    }
  
    // 点击「继续」跳转第二页的逻辑
    goToNextPage(): void {
      // 跳转前先保存当前表单数据
      this.formStorage.saveFormData(this.userForm);
      this.router.navigate(['/second-page']);
    }
  }
  

方法2：本地存储实现（刷新页面也可保留数据） #

如果需要支持刷新页面后数据不丢失，可以使用sessionStorage/localStorage存储：

• 跳转前序列化表单值存储：sessionStorage.setItem('userForm', JSON.stringify(this.userForm.value))
• 返回表单页时读取数据回填：

  const savedForm = sessionStorage.getItem('userForm');
  if (savedForm) {
    this.userForm.patchValue(JSON.parse(savedForm));
  }
  

注意：敏感数据不要用localStorage存储，sessionStorage在标签页关闭后会自动清除，安全性更高。

方法3：路由状态临时传递（单次跳转场景适用） #

Angular 7+支持路由跳转带state参数，适合仅需要单次跨路由传递数据的场景：

• 跳转时携带表单数据：this.router.navigate(['/second-page'], { state: { formValue: this.userForm.value } })
• 第二页点击返回时把表单数据再通过state参数带回，表单页读取history.state?.formValue回填即可

该方案数据仅存在于浏览器会话历史中，刷新页面数据会丢失。

大型项目可选方案 #

如果项目已经引入NgRx/Redux等全局状态管理工具，直接将表单数据存入全局store是更规范的实现方式。

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