javascript - コンポーネントベースのマットステッパーの次のステップにデータを渡します

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 で [次へ] をクリックした後、2 番目のコンポーネントを初期化または再初期化できますか?

ステップ1から移動した後、ステップ2で選択したアイテムのリストを表示するにはどうすればよいですか?

上記のシナリオの最善のアプローチは何ですか?

私の質問に答えることができる参照へのリンクだけで十分です。

ありがとうございました。