从一个组件路由到另一个组件之前的角度 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。