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

Question

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

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

Step-1 显示多选项目列表，并将选定的项目列表传递给下一步 step-2，并在 step-2 中添加每个项目的数量。

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

我创建了一个公共(public)服务层来设置和获取选定的项目。 ngOnInit 第 2 步的组件试图从公共(public)服务中获取选定列表，但问题是组件 2 在下一次点击之前已经启动。

在第1步点击next后，是否可以初始化或重新初始化第二个组件？

从step-1移到step-2中如何显示选中的items列表？

上述情况的最佳方法是什么？

只需链接到任何可以回答我的问题的引用资料，就足够了。

谢谢。

Answer 1

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

要从组件外部使用数据，请使用 @Input .

因为我不知道您的项目类型，所以我将在本示例中使用 ItemType。

选择项目组件

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

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

and when the select changes, just do

this.onDataChange.emit(formValue);

添加数量组件

@Input() item: ItemType;

如果你想在值改变时触发一些 Action ，使用set。例如:

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

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

parent

使用输出和输入值。

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