我可以以编程方式在Angular/Angular Material中移动垫水平步进器的步骤吗

问题描述

我对Angular材质(使用Angular 4+)有疑问.在组件模板中说，我添加了一个<mat-horizontal-stepper>组件，并且在每个步骤<mat-step>中，我都有步进按钮来导航该组件.像这样...

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>

现在，我想知道是否可以从每个步骤中删除按钮，并将它们放置在<mat-horizontal-stepper>中的其他位置，甚至在静态位置甚至在<mat-horizontal-stepper>之外，而且我可以使用我内部的代码来回导航组件打字稿文件.为了提出一个想法，我希望我的HTML像这样

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>

推荐答案

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

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.

在您的模板中:

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

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>

..并在您的打字稿中:

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

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

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

链接到 stackblitz演示 .

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

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();
}

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

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

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

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中移动垫水平步进器的步骤吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！