Angular 5.0中点击编辑按钮返回预填数据表单页的实现方法

你之前用location.back()、history.back()或者带skipLocationChange的路由跳转没用，核心原因是表单组件在跳转后会重新初始化，之前填写的数据没有被持久化存储。下面给你几种靠谱的实现方案，按推荐程度排序：

方案一：使用共享服务存储表单数据（最推荐） #

Angular的服务是单例的，能跨组件、跨路由保存数据，这是处理这类场景的标准做法。

步骤1：创建共享服务 #

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

@Injectable()
export class FormDataService {
  // 存储表单数据的私有变量
  private quoteFormData: any = {};

  // 保存表单数据
  saveQuoteFormData(data: any): void {
    this.quoteFormData = { ...data }; // 浅拷贝避免引用问题
  }

  // 获取表单数据
  getQuoteFormData(): any {
    return { ...this.quoteFormData }; // 返回拷贝，防止外部修改内部数据
  }
}

记得在你的模块里把这个服务加入providers数组，确保全局可用。

步骤2：表单组件中保存&读取数据 #

在表单组件里，提交时把数据存到服务，初始化时从服务读取数据填充表单：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormDataService } from '../form-data.service';

@Component({
  selector: 'app-quote-form',
  templateUrl: './quote-form.component.html'
})
export class QuoteFormComponent implements OnInit {
  // 你的表单模型（根据实际字段调整）
  formModel = {
    name: '',
    email: '',
    phone: '',
    quoteContent: ''
  };

  constructor(
    private router: Router,
    private formDataService: FormDataService
  ) {}

  ngOnInit(): void {
    // 初始化时读取服务里的保存数据，填充表单
    const savedData = this.formDataService.getQuoteFormData();
    if (Object.keys(savedData).length > 0) {
      this.formModel = savedData;
    }
  }

  // 表单提交方法（跳转到下一页前保存数据）
  onSubmit(): void {
    this.formDataService.saveQuoteFormData(this.formModel);
    this.router.navigate(['/your-next-page']); // 跳转到详情页
  }
}

步骤3：详情页的Edit按钮跳转 #

点击Edit时直接跳回表单页即可，表单组件会自动从服务读取数据：

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

@Component({
  selector: 'app-next-page',
  templateUrl: './next-page.component.html'
})
export class NextPageComponent {
  constructor(private router: Router) {}

  goToQuoteForm(): void {
    console.log('back called');
    this.router.navigate(['/quote']); // 直接跳转表单路由
  }
}

方案二：使用LocalStorage/SessionStorage（适合需要持久化的场景） #

如果希望用户刷新页面后数据还能保留，可以用浏览器的本地存储：

表单组件提交时保存数据 #

onSubmit(): void {
  // 把对象转成JSON字符串存储
  localStorage.setItem('quoteFormData', JSON.stringify(this.formModel));
  this.router.navigate(['/your-next-page']);
}

表单组件初始化时读取数据 #

ngOnInit(): void {
  const savedData = localStorage.getItem('quoteFormData');
  if (savedData) {
    this.formModel = JSON.parse(savedData);
  }
}

详情页Edit按钮跳转 #

和方案一一样，直接跳回表单路由即可。

为什么你之前的方法没用？ #

• location.back()/history.back()：浏览器后退后，表单组件会重新创建，之前的组件实例已销毁，数据自然丢失；
• this.router.navigate(['quote'], { skipLocationChange: true })：skipLocationChange只是不修改浏览器URL，但组件依然会重新初始化，不会保留之前的状态。

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