我可以通过编程方式移动角/角材料中垫子水平步进的步骤吗

小开

最佳答案

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

在你的模板中:

然后在你的 goBack()和 goForward()方法中，传递步进 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();
}

链接到 < strong > stackblitz demo 。

你也可以使用 ViewChild在你的 TypeScript 中获取步进组件的引用，如下所示:

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


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


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

在这种情况下，不必在组件的 html 中传递方法中的步进引用。链接到 < strong > 与 ViewChild 一起演示

你可使用以下方法启用/禁用 Back及 Next按钮:

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

小开

除了@费萨尔的回答之外，这是我关于使 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 .

小开

如果你是 使用直线步进，请按照下列步骤进行:

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

然后为 下一步按钮写方法命名为 next():

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

注意: 由于状态通过 isThisStepdone 传播，导致 异步部分(setTimeout())是必需的。

小开

还可以通过使用 selectedIndex 指定步进程的实际索引来实现。

斯塔克闪电战: 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;
}
}

小开

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

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

小开

我实现的解决方案允许前面的步骤验证(它填充验证点) :

  ngAfterViewInit() {
if(this.isDone) {
this.stepper.selectedIndex = 0;
this.stepper.linear = false;
    

// remove the validation // which makes the next call to the next method validate the step. warning => the validation should be readded.
this.firstFormGroup = this._formBuilder.group({
email: ['',],
password:['',]
});
    

this.stepper.next();
          

this.secondFormGroup = this._formBuilder.group({
pricingYear: ['',],
pricingMontly: ['',],
});
this.stepper.next();
    

setTimeout(() => {
this.stepper.linear = true;
});
}
}