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

Posted 2023-05-07

【中文标题】Angular Material - 防止 mat-stepper 在步骤之间导航

【英文标题】：Angular Material - Prevent mat-stepper from navigating between steps

【发布时间】：2018-04-23 12:18:33

【问题描述】：

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

我只需要通过按钮导航。

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

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

但它没有奏效。

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

【参考方案1】：

您最初发布的内容：

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

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

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

还要确保您使用的是 horizo​​ntal 步进器而不是 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;