从一个零部件到另一个零部件的路线之前的角度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-处理未保存的更改。