一个形成三页.如何在它们之间传递状态?

Question

我的目标：
我想让用户创建一个新对象，比如说一辆车。它分为三个步骤/页面/视图：

1. 有关汽车的信息 - 带有输入的表格(第一页<app-car-create-page1></app-car-create-page1>)
2. 有关当前所有者的信息 - 带有输入的表单(第二页<app-car-create-page2></app-car-create-page2>)
3. 有关新所有者的信息 - 带输入的表单(第三页<app-car-create-page3></app-car-create-page3>)

问题：
如何将表单数据从app-car-create-page1传递到app-car-create-page2以及从app-car-create-page2传递到app-car-create-page3？

我的配菜：
对我来说，最简单的方法是使用state对象并以这种方式嵌入它：

第 1 页

@Component({
selector: 'app-car-create-page1',
templateUrl: './car-create-page1.component.html',
styleUrls: ['./car-create-page1.component.scss']
})
export class CarCreatePage1Component implements OnInit {
carInformationFormGroup = this.fb.group({
brand: [''],
model: [''],
mileage: ['']
});
constructor(private fb: FormBuilder, private router: Router) {
}
ngOnInit() {
}
private navigateToNextPage() {
this.router.navigateByUrl('/cars/create?pageNr=2',
{state: {page1FormData: this.carInformationFormGroup}});
}
}

第 2 页

@Component({
selector: 'app-car-create-page2',
templateUrl: './car-create-page2.component.html',
styleUrls: ['./car-create-page2.component.scss']
})
export class CarCreatePage2Component implements OnInit {
private state$: Observable<object>;
constructor(private router: Router) { }
ngOnInit() {
this.state$ =  this.router.events.pipe(
filter(e => e instanceof NavigationStart),
map(() => this.router.getCurrentNavigation().extras.state)
);

}
}

什么给了我：

ERROR Error: Uncaught (in promise): DataCloneError: Failed to execute 'pushState' on 'History': function () { return _this._updateDomValue(); } could not be cloned.
Error: Failed to execute 'pushState' on 'History': function () { return _this._updateDomValue(); } could not be cloned.
at BrowserPlatformLocation.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.BrowserPlatformLocation.pushState (platform-browser.js:610)
at PathLocationStrategy.push../node_modules/@angular/common/fesm5/common.js.PathLocationStrategy.pushState (common.js:498)
(...)

根据其他在线帖子，这与序列化问题有关。可能解决问题的是安全的 json 字符串。

我的主要问题的另一个解决方案是使用ngx-navigation-with-data。

说实话，我是前端的初学者，所以我不容易做出正确的决定，因此我的问题。

1. 在这种情况下，我的方法是否正确？
2. 我应该怎么做才能将表单数据从一个组件传递到另一个组件？
3. 我已经阅读了有关创建服务类的方法，该服务类应该注入两个组件并从那里获取数据。但这绝对不适合我的情况。

Answer 1

您可以通过服务执行此操作：

服务.ts

private variable = new BehaviorSubject('default val');
varToSend = this.variable.asObservable();
connectVariable(message){
this.variable .next(message);
}

第 1.T 页

this.service.connectVariable(varToSend)

第 2 页

this.service.varToSend.subscribe(message => {this.varInPage2= message});

Answer 2

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class CarService {
public get car () {
return this._car.asObservable();
}
public set car (next) {
return this._car.next(next);
}
private _car = new BehaviorSubject({});

constructor() { }
}

现在你可以像这样改变汽车对象的值

export class CarComponent implements OnInit {
constructor(private carService: CarService) { }
ngOnInit() {
// change the value
this.carService.car = newValue;
// subscribe for changes
this.carSer
}
}