如何重置为第一步角步进CDK？

问题描述

我有一个项目列表，每个项目都有一个按钮来显示模式步进器。例如，当我单击ID为1的项1的按钮并单击步骤2旁边的步进器时，然后通过单击“模态”上的“取消”来关闭模态。之后，我单击id为“ 2”的打开模态项目2，但步进器仍保留为步骤2，我希望将其重置为步骤1

<app-ui-modal
  [(show)]="isShowModalStepper"
  [hiddenHeader]="false"
  [hiddenFooter]="true"
  [paddingNone]="true"
  [width]="60"
  [height]="">
  <div ui-modal-body>
    <app-stepper #cdkStepper [linear]="true">
      <cdk-step label="step 1" [editable]="true" [stepControl]="frmConfirmRight" [optional]="false">
        <ng-template cdkStepLabel>
          <span>STEP 1</span>
        </ng-template>
        <form [formGroup]="frmConfirmRight">
          <div class="my-4">
            <p class="text-center text-3xl text-orange-regular">Hello world</p>
            <div class="flex justify-center my-2">
              <app-ui-input-container>
                <app-ui-input-checkBox-wrapper label="Agree">
                  <input appUIInputCheckBox type="checkBox"
                    formControlName="confirm">
                </app-ui-input-checkBox-wrapper>
              </app-ui-input-container>
            </div>
          </div>
          <footer class="my-4 flex-center">
            <!-- Close modal -->
            <button class="mx-1 w-24" [size]="'md'" app-ui-button [variant]="'default'"
              (click)="isShowExclusion = !isShowExclusion">
              Cancel
            </button>
            <!-- Next step -->
            <button class="mx-1 w-24"
              [size]="'md'"
              [disabled]="frmConfirmRight.invalid"
              app-ui-button
              [variant]="'primary'"
              cdkStepperNext>
              Next step
            </button>
          </footer>
        </form>
      </cdk-step>

感谢您的帮助。谢谢！

解决方法

引用步进器，然后在适当的时候调用以下方法（此实现假定您从父组件引用步进器）：

@ViewChild('cdkStepper') cdkStepper: MatStepper | undefined;

someMethod(){
  if(this.cdkStepper){
    this.cdkStepper.reset()
  }
}

,

一段时间后我发现

<button class="mx-1 w-24" [size]="'md'" app-ui-button [variant]="'default'"
   (click)="isShowModalStepper = !isShowModalStepper; cdkStepper.reset()">
    Cancel
</button>