我可以在 Angular/Angular Material 中以编程方式移动 mat-h​​orizo​​ntal-stepper 的步骤吗 [英] Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material

问题描述

我有一个关于 Angular Material(使用 Angular 4+)的问题.假设在我的组件模板中，我添加了一个 组件，并且在每个步骤 中，我都有步进器按钮来导航组件.像这样...

<垫步>第1步<button mat-button matStepperPrevious type="button">Back</button><button mat-button matStepperNext type="button">Next</button></mat-step><垫步>第2步<button mat-button matStepperPrevious type="button">Back</button><button mat-button matStepperNext type="button">Next</button></mat-step><垫步>第 3 步<button mat-button matStepperPrevious type="button">Back</button><button mat-button matStepperNext type="button">Next</button></mat-step></mat-h​​orizo​​ntal-stepper>

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

<垫步>第1步</mat-step><垫步>第2步</mat-step><垫步>第 3 步</mat-step><!-- 一种选择--><div><button mat-button matStepperPrevious type="button">Back</button><button mat-button matStepperNext type="button">Next</button>

</mat-h​​orizo​​ntal-stepper><!-- 第二个选项--><div><button (click)="goBack()" type="button">Back</button><button (click)="goForward()" type="button">Next</button>

解决方案

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

在您的模板中:

为您的步进器添加一个 id，例如#stepper.然后在您的 goBack() 和 goForward() 方法中，传递步进器 ID:

<!-- 步骤--></mat-h​​orizo​​ntal-stepper><!-- 第二个选项--><div><button (click)="goBack(stepper)" type="button">Back</button><button (click)="goForward(stepper)" type="button">Next</button>

.. 并在您的打字稿中:

import { MatStepper } from '@angular/material/stepper';返回(步进器:MatStepper){stepper.previous();}前进(步进器:MatStepper){stepper.next();}

链接到 stackblitz 演示.

<小时>

您还可以使用 ViewChild 获取对 TypeScript 中步进器组件的引用，如下所示:

@ViewChild('stepper') private myStepper: MatStepper;回去(){this.myStepper.previous();}直走(){this.myStepper.next();}

在这种情况下，您不必在组件的 html 中的方法中传递步进器引用.链接到 ViewChild 演示

<小时>

您可以使用以下方法启用/禁用 Back 和 Next 按钮:

下一步</button>

I have a question regards Angular Material (with Angular 4+). Say in my component template I add a <mat-horizontal-stepper> component, and within each step <mat-step> I have stepper buttons to navigate the component. Like so...

<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>

Now I am wondering if it is possible to remove the buttons out of each step and have them elsewhere in the <mat-horizontal-stepper> in a static position or even outside the <mat-horizontal-stepper> and I can navigate backwards and forwards using code within my component typescript file. To give an idea, I would like my HTML be something like this

<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>

解决方案

Yes. It is possible to jump to a specific stepper by using selectedIndex property of the MatStepper. Also, MatStepper exposes public methods next() and previous(). You can use them to move back and forth.

In your template:

Add an id to your stepper e.g. #stepper. Then in your goBack() and goForward() methods, pass the stepper id:

<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>

.. and in your typescript:

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

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

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

Link to stackblitz demo.

---

You can also use ViewChild to get a reference to the stepper component in your TypeScript as shown below:

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

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

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

In this case, you don't have to pass the stepper reference in the method in your component's html. Link to Demo with ViewChild

---

You can enable/disable the Back and Next buttons by using the following:

<button (click)="goBack(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>

这篇关于我可以在 Angular/Angular Material 中以编程方式移动 mat-h​​orizo​​ntal-stepper 的步骤吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！