我正在使用MatStepper,我在mat-step内有一个组件,其中有一个按钮,单击按钮时我需要更改step,我不确定是否可以通过stepper @Input,然后进行下一步。我正在搜索,但没有找到与此相关的任何答案。谁能帮我吗?
steppercomponent.html
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [completed]="false">
<ng-template matStepLabel>
<h5 class="step-title">Title 1</h5>
<div class="mat-step-custom-line"></div>
</ng-template>
<app-items-form [matStepper]="stepper"></app-items-form>
</mat-step>
<mat-step [completed]="false">
<ng-template matStepLabel>
<h5 class="step-title">Title 2</h5>
<div class="mat-step-custom-line"></div>
</ng-template>
</mat-step>
<mat-step [completed]="false">
<ng-template matStepLabel>
<h5 class="step-title">Title 3</h5>
<div class="mat-step-custom-line"></div>
</ng-template>
</mat-step>
</mat-horizontal-stepper>
ItemsControlComponent.html
<form [formGroup]="formgroup">
<div class="form-group row">
<div class="col-md-6 col-sm-12 offset-md-3">
<div class="col-sm-12 col-md-12 offset-md-1">
<div class="col-sm-10 nopadding">
<button mat-button [disabled] (click)="goForward()" class="btn btn-primary"> Next
</button>
</div>
</div>
</div>
</div>
</form>
ItemsControlComponent.ts
export class ItemsControlComponent implements OnInit {
@Input()
public matStepper: MatStepper;
constructor() {
}
ngOnInit() {
}
goForward() {
debugger;
if (this.formgroup.valid === true) {
this.matStepper.next();
}
}
}