Question

我有一个mat-horizontal-stepper，我将linear属性设置为true。如果所有步骤现在都有效，我可以通过单击标题或标签导航到上一步。我不想要那个属性。

我只需要通过按钮进行导航。

我尝试用：

禁用指针功能

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

但它没有奏效。

我需要通过单击标题来停止导航，或者在单击步进标题时触发一个函数。

Answer 1

您最初发布的内容：

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

只要您将::ng-deep添加到CSS类，

就可以工作。像这样：

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

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

Answer 2

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

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

在ts文件中的组件 -

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

Answer 3

将mat-step

的可编辑设置为false

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

Answer 4

要在单击步进器标题时触发功能，您可以订阅MatStepper.selectionChange。它在切换步骤时发出，并为您提供有关上一步和所选步骤的信息。

HTML：

<mat-horizontal-stepper #stepper[linear]="true">
  <mat-step label="firstStep">
    ...
  </mat-step>
</mat-horizontal-stepper>

TS：

class ExampleComponent implements OnInit {
  @ViewChild('stepper') stepper: MatStepper;

  ngOnInit() {
    this.stepper.selectionChange.subscribe(selection => {
       console.log(selection.selectedStep)
       console.log(selection.previouslySelectedStep)
    }
 }

当所选步骤是最后一步时，您可以使用此步骤在前面的所有步骤中设置editable = false：

this.stepper._steps.forEach(step => step.editable = false);

Answer 5

我遇到了与您类似的问题，而我所做的是：

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

female

在.ts文件中，相应的操作将触发以下内容：

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

当然，还启用了线性模式。

Answer 6

我尝试过但是没用。

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

然后我尝试了这个。

.mat-step-header {
            pointer-events: none !important;
        }

这绝对好用。

谢谢

Answer 7

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

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

7 个答案: