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

【问题标题】：Angular Material - Prevent mat-stepper from navigating between stepsAngular Material - 防止 mat-stepper 在步骤之间导航
【发布时间】：2018-04-23 12:18:33
【问题描述】：

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

我只需要通过按钮导航。

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

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

但它没有奏效。

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

【问题讨论】：

标签： angular angular-material angular-material2 angular-material-stepper

【解决方案1】：

您最初发布的内容：

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

只要在 CSS 类中添加 ::ng-deep 就可以了。像这样：

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

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

【讨论】：

是的，但你的方式很容易被“检查”工具和禁用 css 规则所抵消

【解决方案2】：

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

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

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

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

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

当然，启用线性模式。

【讨论】：

如何触发第 2 步？你用什么活动？
我有一个按钮，它将调用函数（连同我需要的其他函数）触发以下内容：this.stepper.selected.completed = true; this.stepper.next();所以这会跳转到后续步骤。

【解决方案3】：

要在标题单击时获取事件，请使用此-

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

在 ts 文件中的组件 -

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

【讨论】：

【解决方案4】：

将 mat-step 的可编辑设置为 false

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

【讨论】：

当前面的值有效时，在这种情况下不起作用

【解决方案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);

【讨论】：

感谢 - 如果其他人遇到错误提示步进器“未定义”，您也可以在 ngAfterViewInit 中订阅

【解决方案6】：

我试过了，但没用。

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

然后我尝试了这个。

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

这工作得很好。

谢谢

【讨论】：

是的，但是你的方式很容易被“检查”工具和禁用 css 规则所抵消

【解决方案7】：

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

【讨论】：