我可以以编程方式在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的{​​{1}}属性跳转到特定的步进器。此外，MatStepper公开了公开方法MatStepper和next()。你可以用它们来回移动。

在您的模板中：

为您的步进器添加ID，例如previous()。然后在#stepper和goBack()方法中，传递步进器ID：

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>

链接到stackblitz demo。

您可以使用以下命令启用/禁用import { MatStepper } from '@angular/material/stepper'; goBack(stepper: MatStepper){ stepper.previous(); } goForward(stepper: MatStepper){ stepper.next(); } 和Back按钮：

Next

Answer 2

除了@ Faisal的回答之外，我还可以在不需要在参数中传递步进器的情况下跳转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 demo。

Answer 3

如果想要以编程方式导航到下一步，如果使用线性步进器，请按照以下步骤操作：

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

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

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

Answer 4

您也可以通过使用selectedIndex指定步进器的实际索引来完成此操作。

stackblitz： https://stackblitz.com/edit/angular-4rvy2s?file=app%2Fstepper-overview-example.ts

HTML：

<div class="fab-nav-container">
   <mat-vertical-stepper linear="false" #stepper>
       <mat-step *ngFor="let step of stepNodes; let i = index">
           <ng-template matStepLabel>
               <p> {{step.title}} </p>
           </ng-template>
       </mat-step>
   </mat-vertical-stepper>
</div>

<div class="button-container">
   <div class="button-grp">
      <button mat-stroked-button (click)="clickButton(1, stepper)">1</button>
      <button mat-stroked-button (click)="clickButton(2, stepper)">2</button>
      <button mat-stroked-button (click)="clickButton(3, stepper)">3</button>
   </div>
</div>

TS：

import {Component, OnInit, ViewChild} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { MatVerticalStepper } from '@angular/material';
import { MatStepper } from '@angular/material';
export interface INodes {
    title: string;
    seq: number;
    flowId: string;
}
/**
 * @title Stepper overview
 */
@Component({
  selector: 'stepper-overview-example',
  templateUrl: 'stepper-overview-example.html',
  styleUrls: ['stepper-overview-example.scss'],
})
export class StepperOverviewExample implements OnInit {
  @ViewChild(MatVerticalStepper) vert_stepper: MatVerticalStepper;
  @ViewChild('stepper') private myStepper: MatStepper;

  stepNodes: INodes[] = [
    { title: 'Request Submission', seq: 1, flowId: 'xasd12'}, 
    { title: 'Department Approval', seq: 2, flowId: 'erda23'}, 
    { title: 'Requestor Confirmation', seq: 3, flowId: 'fsyq51'}, 
  ];

  ngOnInit() {
  }
  ngAfterViewInit() {
    this.vert_stepper._getIndicatorType = () => 'number';
  }
  clickButton(index: number, stepper: MatStepper) {
      stepper.selectedIndex = index - 1;
  }
}

Answer 5

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

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