如何重置为第一步 Angular stepper CDK？答案

【问题标题】：How to reset to step one Angular stepper CDK?如何重置为第一步 Angular stepper CDK？
【发布时间】：2020-08-26 07:51:25
【问题描述】：

我有一个项目列表，每个项目都有一个按钮来显示模态步进器。例如，当我单击 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>

感谢任何帮助。谢谢你！

【问题讨论】：

标签： javascript html angular angular-cdk

【解决方案1】：

过了一会儿，我找到了

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

【讨论】：

【解决方案2】：

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


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

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

【讨论】：