angular material stepper:禁用标题导航

Question

我想导航步进器只抛出下一个和后退按钮.我无法使用此功能,因为用户还可以单击每个步骤标签以导航到任何步骤.我不能使用线性,因为它需要每个步骤都有一个formArray或FormGroup.

我试过了<mat-step (click)="$event.stopPropagation()">.不知道还有什么可以尝试,任何建议将不胜感激.

Answer 1

将其添加到样式表中.我试图禁用标题导航.试过很多东西,但这个黑客行之有效.你可以试试这个,直到Angular Material Team支持这个功能.

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

Answer 2

逐步使用linear步进器completed=false。当用户按下您的按钮时，以编程方式完成该步骤并移至下一个步骤。

这样，您无需弄乱CSS指针事件。在我们的应用程序中，这导致NVDA的可访问性问题。

<mat-horizontal-stepper linear #stepper>
  <mat-step completed="false">
    <ng-template matStepLabel>Step 1</ng-template>
    <app-some-child (nextClicked)="nextClicked($event)" ></app-some-child>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Step 2</ng-template>
    <app-some-other-child></app-some-other-child>
  </mat-step>
</mat-horizontal-stepper>

export class AppComponent implements OnInit {

  @ViewChild('stepper') stepper: MatStepper;

  nextClicked(event) {
    // complete the current step
    this.stepper.selected.completed = true;
    // move to next step
    this.stepper.next();
  }
}

Answer 3

不要使用 ::ng-deep 因为它已被弃用。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

相反，如果您使用的是 Angular Material，请使用文档中的主题指南。

https://material.angular.io/guide/theming

样式的实现示例：

我的自定义元素.scss

@import '~@angular/material/theming';

@mixin custom-stepper-theme() {
  .mat-horizontal-stepper-header {
    pointer-events: none;
  }
}

global-material-theme.scss

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import './material/my-custom-elements.scss';

@include custom-stepper-theme();

angular.json

...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...

Answer 4

对于任何仍在寻找替代解决方案（如果::ng-deep不起作用）的人。

此外，::ng-deep已弃用并设置ViewEncapsulation，如果您想使用 CSS 来执行此操作，则

导入ViewEncapsulation并设置None为您的

组件.ts：

import { Component, OnInit, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "stepper-overview-example",
  templateUrl: "stepper-overview-example.html",
  styleUrls: ["stepper-overview-example.css"],
  encapsulation: ViewEncapsulation.None
})
export class StepperOverviewExample implements OnInit {
  isLinear = false;

  constructor() {}

  ngOnInit() {}
}

设置pointer-events为none您的

组件.css：

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

这是一个演示。

Answer 5

只是为了改进已接受的答案，因为如果您有垂直步进器，它就不起作用。

要阻止用户单击标题并导航，请将以下代码添加到根目录中的 style.css 文件中：-

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

这将确保它适用于mat-horizontal-stepper-header和mat-vertical-stepper-header

Answer 6

没有::ng-deep不起作用

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