угол 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

Вместо методов жизненного цикла вы, возможно, решите использовать CanDeactivate Route Guard при выходе из компонента, что даст вам возможность добавлять такие функции, как сохранение и отмена. Для информации попробуйте https://v5.angular.io/guide/router#candeactivate-handling-unsaved-changes.

Answer 2

Сохранять данные, захваченные в каждом компоненте глобальной службы, и восстанавливать их при перемещении назад и вперед. Вы можете назначить глобальный объект службы в своем конструкторе или методе 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 для реализации любого кода, прежде чем переходить к другому компоненту.

Обновлено : код для home.component.ts и global.service.ts согласно URL-адресу stackblitz