角材料-防止垫步进器在步骤之间导航

Question

我有一个 mat-horizontal-stepper哪里将线性属性设置为true。到目前为止，当所有步骤都有效时，我可以通过单击标题或标签来导航到先前的步骤。我不要那个财产

我只需要通过按钮导航。

我尝试使用以下方式禁用指针功能：

    .mat-horizontal-stepper-header{
       pointer-events: none;
     }

但是没有用。

我需要通过单击标题停止导航，或者在单击步进标题时触发功能。

Answer 1

我和你有类似的问题，我所做的是：

1. 在 html 中，我将 [editable] 和 [completed] 配置为 false

<mat-step [completed]="false" [editable]="false">

2. 在.ts文件中，对应的action会触发如下：

this.stepper.selected.completed = true;
this.stepper.next();

当然，启用线性模式。

Answer 2

您最初发布的内容：

.mat-horizontal-stepper-header{
    pointer-events: none;
}

只要您添加::ng-deep到CSS类中，它就可以工作。像这样：

::ng-deep .mat-horizontal-stepper-header {
    pointer-events: none !important;
}

还要确保您使用的是水平步进器，而不是垂直步进器。当调用适当的CSS类时，这显然很重要。

Answer 3

要获取标题上的事件，请使用此-

<mat-horizontal-stepper (selectionChange)="stepClick($event)" [linear]="isLinear" #stepper="matHorizontalStepper">

在ts文件中，组件-

stepClick(ev) {console.log(ev)}

Answer 4

将可编辑设置为 falsemat-step

<mat-step editable="false"> ... </mat-step>