gpt4 book ai didi

angular - 如何跨步进组件的各个步骤共享数据?

转载 作者:行者123 更新时间:2023-12-02 15:00:51 26 4
gpt4 key购买 nike

有没有一种方法可以在步进器组件的各个步骤之间共享数据?

例如,在下面的代码中,我希望以app-step1形式填写的数据在app-step2组件中可用。

<mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper" >
<mat-step [stepControl]="zerpFormGroup" >
<ng-template matStepLabel>Step I</ng-template>
<app-step1 [stepper]="stepper"></app-step1>
</mat-step>
<mat-step [stepControl]="firstFormGroup" >
<ng-template matStepLabel ">Step II</ng-template><br>
<app-step2 [stepper]="stepper"></app-step2>
</mat-step>

最佳答案

使用服务来处理 Subject(或 ReplaySubject)的变化。

例如:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { SharedData } from '@app/models/shared-data.model';

@Injectable()
export class StepperDataService {
public dataChange = new Subject<SharedData>();

setData(data: SharedData) {
this.dataChange.next(data);
}
}

在您想要更改数据的组件中,您只需调用 setData 方法即可。

export class Step1Component implements OnInit {
...
constructor(private sdService: StepperDataService) { }
...
onDataChanged() {
const data: SharedData = { data to transmit };
this.sdServices.setData(data);
}

在您想要接收数据更改的组件中,您订阅主题 dataChange。

export class Step2Component implements OnInit, OnDestroy {
private sub: Subscription;
...
constructor(private sdService: StepperDataService) { }
...
ngOnInit(): void {
this.sub = this.sdServices.dataChange
.subscribe((data: SharedData) => {
// do whatever you need with the shared data
});
}

关于angular - 如何跨步进组件的各个步骤共享数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49822337/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com