将数据传递到基于组件的 mat-stepper 中的下一步

Question

我正在使用基于组件的垫步进器组件来显示线性过程。每个步骤都有自己的组件，如下所示

<mat-card>
    <mat-horizontal-stepper [linear]="isLinear" labelPosition="bottom" #stepper>
    
    <!-- Step-1 -->
    <mat-step [stepControl]="firstFormGroup">
       <ng-template matStepLabel>Select Items</ng-template>
       <select-item-component>
       <select-item-component>
       <div class="mt-5">
          <button mat-flat-button color="primary" matStepperNext>Next</button>
       </div>
    </mat-step>
    
    <!-- Step-2 -->
    <mat-step [stepControl]="firstFormGroup">
       <ng-template matStepLabel>Add Quantity</ng-template>
       <add-qty-component>
       <add-qty-component>
       <div class="mt-5">
          <button mat-flat-button color="primary" matStepperNext>Next</button>
       </div>
    </mat-step>
    
    <!-- Step-3 -->
    <mat-step [stepControl]="firstFormGroup">
       <ng-template matStepLabel>Conform</ng-template>
       <conform-step-component>
       <conform-step-component>
       <div class="mt-5">
          <button mat-flat-button color="primary" matStepperNext>Done</button>
       </div>
    </mat-step>
    </mat-horizontal-stepper>
 </mat-card>

步骤 1 显示多选项目列表，并将所选项目列表传递到下一个步骤 2，并在步骤 2 中添加每个项目的数量。

如何在下一步单击时将所选项目从步骤 1 传递到步骤 2，并显示传递的项目以在步骤 2 中输入数量？

我创建了一个公共服务层来设置和获取选定的项目。ngOnInit步骤 2 的组件尝试从公共服务获取所选列表，但问题是组件 2 在下次单击之前已启动。

单击步骤 1 中的“下一步”后可以初始化或重新初始化第二个组件吗？

从步骤 1 移动后，如何显示步骤 2 中的所选项目列表？

对于上述情况，最好的方法是什么？

只需一个可以回答我的问题的任何参考文献的链接，就足够了。

谢谢。

Answer 1

要使组件输出值，请使用@Output。

要使用组件外部的数据，请使用@Input。

由于我不知道本示例中将使用的物品类型ItemType。

选择项目组件

在 select-item-component 中，声明一个属性：

@Output() onDataChange: EventEmitter<ItemType> = new EventEmitter();

当选择改变时，只需执行

this.onDataChange.emit(formValue);

添加数量组件

@Input() item: ItemType;

如果您想在值更改时触发某些操作，请使用set。例如：

@Input() set item(value: ItemType) {
  this.loadOptions(value);
}

您可以在select-item-componentwithselect1和select2变量中执行相同的操作。

家长

使用输出和输入值。

...
<select-item-component (onDataChange)="select1 = $event"></select-item-component>
<select-item-component (onDataChange)="select2 = $event"></select-item-component>

...

<add-qty-component [item]="select1"></add-qty-component>
<add-qty-component [item]="select2"></add-qty-component>
...

Answer 2

您可以组合使用 @Output 和 @Input 装饰器。

@Output 装饰器可以在子组件（stepper 1）中使用，将数据传输到其父组件。

@input 装饰器可用于将数据从父组件发送到子组件（步进器 2）。

你可以在这里读更多关于它的内容。