Angular 9使用行为主体来回维护状态

编程问答 2022-08-16

问题描述

我有表单向导，所以我想来回移动，所以我正在使用行为主题。但是单击后退按钮，我没有得到以前的表单值。我不希望它存储在历史状态。请帮助我如何实现这一目标。我为来回创建了通用服务。如果我做错了事，请纠正我。 Rxjs，但返回到page1，它具有最新值，例如form2。我的期望是维护状态并使用rxjs修补表单值

FormComponent2（模板） 

features = ["vendored"]

FormComponent2（ts） 

<form [formGroup]="form2Back" (ngSubmit)="refresh()">
  <input type="text" formControlName="lName">
  <input type="submit">
</form>

Component1（模板） 

import { Component,OnInit } from '@angular/core';
import { FormBuilder,FormControl,Validators,FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { CommonService } from '../common.service';

@Component({
  selector: 'app-form2',templateUrl: './form2.component.html',styleUrls: ['./form2.component.scss']
})
export class Form2Component implements OnInit {
  form2Back: FormGroup;
  constructor(private fb: FormBuilder,private router: Router,private commonService: CommonService) {}

  ngOnInit(): void {
    this.form2Back = this.fb.group({
      lName: new FormControl('',[Validators.required])
    });
  }

  refresh() {
    const datas2 = {
      ...this.form2Back.value,}
    this.commonService.datValue.next({
      datas2
    });
    this.router.navigateByUrl('/');

  }
}

Component1（ts） 

<form [formGroup]="contactForm" (ngSubmit)="refresh()">
  <input type="text" formControlName="firstName">
  <input type="submit">
</form>

常用服务

： 
import { Component,OnInit,Input,ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core';
import { FormGroup,FormBuilder,FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { CommonService } from '../common.service';

@Component({
  selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.scss'],})
export class ChildComponent implements OnInit {
  @input() public data: string[];
  public contactForm: FormGroup;

  constructor(private cd: ChangeDetectorRef,private fb: FormBuilder,private cs: CommonService) {}

  ngOnInit(): void {
    this.contactForm = this.fb.group({
      firstName: new FormControl('',[Validators.required])
    });
  }

  refresh() {
    const datas = {
      ...this.contactForm.value,}
    this.cs.datValue.next({
      ...this.cs.datValue,insured: datas,});
    this.router.navigateByUrl('/form')

  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular9rxjsrxjsrxjs-observables