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

Question

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

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

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

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

但它没有奏效。

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

Answer 1

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

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

在ts文件中的组件 -

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

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-step设置editable为false

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

Answer 4

我有一个类似的问题，我做的是：

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

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

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

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

当然，启用线性模式。

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)
    }
 }

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

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; }