angular - Angular Material - 防止 mat-stepper 在步骤之间导航

Question

我有一个mat-horizontal-stepper我将线性属性设置为 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;
}

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

Answer 2

我遇到了和你类似的问题，我所做的是：

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

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

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

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

当然，启用线性模式。

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>

Answer 5

要在单击步进器标题时触发功能，您可以订阅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)
    }
 }

When the selected step is the last one, you could use this to set editable = falsein all the previous steps:

this.stepper._steps.forEach(step => step.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; }