1

有没有办法可以在步进器组件的各个步骤之间共享数据？

例如，在下面的代码中，我希望以 的形式填写的数据在组件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>

4

3 回答 3

3

使用服务来处理带有主题（或 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
    });
}
于 2020-04-28T14:27:51.600 回答
2

解决了这个问题。使用@Output/@Input 的组合。@Output 装饰器在子组件 1 中与 EventEmitter 一起使用。这个事件发射器在我想要传递的字段中发出值，然后在父组件中捕获该值（在本例中是我的步进器组件。然后使用 @Input 装饰器将此值传递给子组件 2。

于 2018-04-14T21:57:18.400 回答
0

您可以使用 @input 装饰器来声明输入属性并将相同的变量绑定到两个组件：

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

然后在您的组件app-step1和app-step2组件中声明输入属性，如下所示：

@Input sharedProperty;

有关更多信息，您可以在 Angular文档中查看更详细的示例。

于 2018-04-13T17:35:35.773 回答