将数据传递到基于组件的步进垫中的下一步

Question

bounty到期在6天内。该问题的答案有资格获得+ 100声望赏金。Vijay Vavdiya正在寻找来自信誉良好的来源的答案。

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

<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中输入数量？

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

在步骤1中单击下一步后，是否可以初始化或重新初始化第二个组件？

从第1步移至第2步时如何显示所选项目列表？

在上述情况下最好的方法是什么？

只是可以回答我的问题的任何参考的链接，就足够了。

谢谢。

Answer 1

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

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

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

Answer 2

另一个选择是使用共享服务。我将在服务上使用Subject，然后在更改数据的组件中调用next，并在下次调用时传递新数据。

public $itemsAdded: Subject<Item> = new Subject<Item>();

Answer 3

您可以出于相同的目的使用ControlContainer，使您可以在子组件和父组件中访问表单控件

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  {{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Fill out your name</ng-template>
     <step1></step1>
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <step2></step2>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
</mat-horizontal-stepper>