我有一个关于“角度材料”（使用“角度4”）的问题。在我的组件模板中，我添加了一个
<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-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（）和前（）。您可以使用它们来回移动。
在您的模板中：
为您的步进机添加一个id，例如< code>#stepper。然后在您的< code>goBack()和< code>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();
}
链接到stackblitz演示。
您还可以使用ViewChild获取对TypeScript中步进组件的引用，如下所示：
@ViewChild('stepper') private myStepper: MatStepper;
goBack(){
this.myStepper.previous();
}
goForward(){
this.myStepper.next();
}
在这种情况下，您不必在组件的html中的方法中传递步进器引用。使用ViewKids链接到Demo
您可以使用以下选项启用/禁用< code >后退和< code >下一步按钮:
<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>
除了@Faisal的答案之外，这是我对使 MatStepper 跳转而无需在参数中传递步进器的看法。
当您需要更灵活地操作步进器时，例如从服务或其他方面，这很有用。
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的演示
如果您想以编程方式导航到下一步，并且使用的是线性步进器，请执行以下步骤：
>
创建如下所示的步进器：
像这样定义垫步：
从< code>mat-step内部创建一个按钮，转到下一步，如下所示:< code >
在. ts文件中声明一个名为stepper的MatStepper引用：@ViewKids（'matHorizontalStepper'）stepper：MatStepper；
此外，在. ts文件中将isThisStepDone初始化为false：isThisStepDone： boolean=false；
然后为名为< code>next()的下一步按钮编写方法:
submit(stepper: MatStepper) {
this.isThisStepDone = true;
setTimeout(() => { // or do some API calls/ Async events
stepper.next();
}, 1);
}
注意：异步部分（setTimeout（））是必需的，因为通过isThisStepDone进行状态传播。
