我可以以编程方式在Angular/Angular Material中移动mat-h​​orizo​​ntal-stepper的步骤

Question

我有一个关于Angular Material(Angular 4+)的问题.在我的组件模板中说我添加了一个<mat-horizontal-stepper>组件,并且在每个步骤中<mat-step>我都有步进按钮来导航组件.像这样......

<mat-horizontal-stepper>
  <mat-step>
    Step 1
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 2
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 3
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
</mat-horizontal-stepper>

现在我想知道是否有可能从每个步骤中删除按钮并将它们<mat-horizontal-stepper>放在静态位置的其他位置,甚至在其他位置之外<mat-horizontal-stepper>,我可以使用组件打字稿文件中的代码向后和向前导航.为了给出一个想法,我希望我的HTML就像这样

<mat-horizontal-stepper>
    <mat-step>
        Step 1
    </mat-step>
    <mat-step>
        Step 2
    </mat-step>
    <mat-step>
        Step 3
    </mat-step>
    <!-- one option -->
    <div>
       <button mat-button matStepperPrevious type="button">Back</button>
       <button mat-button matStepperNext type="button">Next</button>
    </div>
</mat-horizontal-stepper>

<!-- second option -->
<div>
   <button (click)="goBack()" type="button">Back</button>
   <button (click)="goForward()" type="button">Next</button>
</div>

Answer 1

是.可以通过使用的selectedIndex属性跳转到特定的步进器MatStepper.此外, MatStepper暴露公共方法next()和previous().您可以使用它们来回移动.

在您的模板中:

在步进器中添加一个id,例如#stepper.然后在你goBack()和goForward()方法,通过步进编号:

<mat-horizontal-stepper #stepper>
    <!-- Steps -->
</mat-horizontal-stepper>    
<!-- second option -->
<div>
   <button (click)="goBack(stepper)" type="button">Back</button>
   <button (click)="goForward(stepper)" type="button">Next</button>
</div>

..并在你的打字稿中:

import { MatStepper } from '@angular/material/stepper';

goBack(stepper: MatStepper){
    stepper.previous();
}

goForward(stepper: MatStepper){
    stepper.next();
}

链接到stackblitz演示.

您可以使用以下命令启用/禁用ViewChild和Back按钮:

@ViewChild('stepper') private myStepper: MatStepper;

goBack(){
    this.myStepper.previous();
}

goForward(){
    this.myStepper..next();
}

Answer 2

除了@ 费萨尔的答案,这是我对制作MatStepper跳跃,而无需通过步进中的参数.

当你需要更灵活地操纵步进器时,例如从一个Service或其它东西,这是有用的.

HTML:

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="6px">
  <button (click)="move(0)">1st</button>
  <button (click)="move(1)">2nd</button>
  <button (click)="move(2)">3rd</button>
  <button (click)="move(3)">4th</button>
</div>

TS档案:

move(index: number) {
    this.stepper.selectedIndex = index;
}

这是stackblitz演示.

Answer 3

如果要以编程方式导航到下一步,并且如果使用线性步进器,请按照以下步骤操作:

• 创建一个stepper这样的: <mat-horizontal-stepper linear #matHorizontalStepper>
• 定义mat-step如下:<mat-step [completed]="isThisStepDone">
• 从内部mat-step创建一个按钮,进入下一步,如下所示: <button (click)="next(matHorizontalStepper)">NEXT STEP</button>
• 在.ts文件中声明一个MatStepper名为stepper的引用:
  @ViewChild('matHorizontalStepper') stepper: MatStepper;
• 另外,在.ts文件初始化isThisStepDone为false:isThisStepDone: boolean = false;

• 然后编写NEXT STEP按钮的方法,名为next():

  submit(stepper: MatStepper) {
   this.isThisStepDone = true;
   setTimeout(() => {           // or do some API calls/ Async events
    stepper.next();
   }, 1);
  }
  

Answer 4

如果您位于子组件内部，则可以注入步进器。

MyMainPageWithStepper.html (simplified)

<mat-horizontal-stepper>
  <mat-step label="Upload">
    <my-component></my-component>
  </mat-step>
</mat-horizontal-stepper>

MyComponent.ts

constructor(private readonly _stepper: CdkStepper}{}

someFunction(): void {
   this._stepper.next();
}