angular 5 从一个组件路由到另一个组件之前如何保存组件表单数据

Question

我正在尝试将一个组件路由到另一个；每个组件都有一些表单数据 (this.formBuilder.group)。当我从一个组件导航到另一个组件时，如果我返回到前一个组件，填充的数据不会恢复。

在为每个组件布线之前，有什么方法可以保存数据吗？在离开组件以保存所有表单数据之前，是否有任何生命周期方法可以检测？

navigation.ts:
    if(currentNav == "Personal Details"){
      this.router.navigateByUrl('/understand/personal');
    } else if(currentNav == "Contact Details"){
      this.router.navigateByUrl('/understand/contact');
    }

contact.ts
ngOnInit() {
    this.contactDetails = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      mobileNumber: ['', Validators.required],
      secondaryNumber: ['', Validators.required]
   });
  }

personal.ts
    this.personalDetails = this.formBuilder.group({
      country: ['', Validators.required],
      countryOfIssue: ['', Validators.required],
      countryOfBirth: ['', Validators.required]
       });
      }

Answer 1

将每个组件中捕获的数据保存在全局服务中，并在来回移动时恢复相同的数据。您可以在构造函数或 ngOnInit 方法中分配全局服务对象。如下所示：

home.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { GlobalService } from'../global.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  homeDetails: FormGroup;

  constructor(private formBuilder: FormBuilder,private globalService: GlobalService) {

    this.homeDetails = this.formBuilder.group({
      homename:['', Validators.required]
    });

   }

  ngOnInit() {
      if(this.globalService.homeDetails){
        this.homeDetails = this.globalService.homeDetails;
      }
  }


  ngOnDestroy() {
    this.globalService.homeDetails = this.homeDetails;

  }

}

global.service.ts

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

@Injectable()
export class GlobalService {
  public homeDetails: FormGroup;
  public aboutDetails: FormGroup;
}

在移动到另一个组件之前，您可以查看 OnDestroy 以实现任何代码。

已更新：根据 stackblitz url

home.component.ts 和 global.service.ts 的代码

Answer 2

您可以决定在退出组件上使用 CanDeactivate Route Guard，而不是生命周期方法，这使您能够添加保存和取消等功能。有关信息，请尝试 https://v5.angular.io/guide/router#candeactivate-handling-unsaved-changes.

angular 5 从一个组件路由到另一个组件之前如何保存组件表单数据

angular 5 before route from one component to another how to save component form data

angular

angular5