Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 如何在步进器组件的各个步骤之间共享数据?_Angular_Angular Material_Stepper - Fatal编程技术网

Angular 如何在步进器组件的各个步骤之间共享数据?

Angular 如何在步进器组件的各个步骤之间共享数据?,angular,angular-material,stepper,Angular,Angular Material,Stepper,有没有一种方法可以跨步进器组件的各个步骤共享数据 例如,在下面的代码中,我希望以app-step1格式填写的数据在app-step2组件中可用 第一步 您可以使用@input decorator声明输入属性,并将同一变量绑定到两个组件: <mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper" > <mat-step [stepControl]="zerpFormGroup" >

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

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


第一步

您可以使用@input decorator声明输入属性,并将同一变量绑定到两个组件:

<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>   

有关更多信息,您可以在Angular中看到一个更详细的示例。

您可以使用@input decorator声明输入属性并将同一变量绑定到两个组件:

<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>   

有关更多信息,请参见Angular中更详细的示例。

对此进行了解析。使用了@Output/@Input的组合@子组件1中使用的输出装饰器与EventEmitter一起使用。此事件发射器在我要传递的字段中发射值,然后在父组件中捕获该值(在这个例子中是我的步进组件)。这个值然后使用@输入装饰器传递到子组件2。< /P> < P>重新使用这个。使用@输出/@输入。@输出装饰器在子组件1中与EventEmitter一起使用。这个事件发射器在我想要传递的字段中发出值,然后被捕获到PAR中。ent组件(在本例中为我的stepper组件。然后使用@Input decorator将此值传递给子组件2。

使用服务处理主题(或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);
  }
}
在要接收更改数据的组件中,您订阅了主题数据更改

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
    });
}

使用服务处理主题(或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);
  }
}
在要接收更改数据的组件中,您订阅了主题数据更改

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
    });
}

我的回答解决了你的问题吗?请现在让我们来帮助你!:)谢谢Antonio。还没有。你知道某个表达式中的确切内容吗?我仍在努力解决这个问题。只是一个更新。我能够得到这个解决方案。发布了我的答案。非常感谢并感谢你在这方面的帮助。我的答案解决了你的问题吗?请现在就告诉我们,这样我们就可以帮助你了!:)谢谢Antonio。还没有。你知道someExpression中到底发生了什么吗。我仍在努力解决问题。只是更新。我能够得到解决方案。发布了我的答案。非常感谢并感谢你在这方面的帮助。第一步组件不需要声明属性为
Output()
?第一步组件不需要声明属性是
Output()