Question

我只想通过下一个和后一个按钮导航步进器。

我无法使用此功能，因为用户还可以单击每个步骤标签以导航到任何步骤。我不能使用线性，因为它要求每个步骤都有formArray或FormGroup。

我尝试了<mat-step (click)="$event.stopPropagation()">。

Answer 1

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

.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

只需改进已接受的答案，因为如果您使用垂直步进器，它将无法正常工作。

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

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

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

Answer 4

我发现了一个有点hacky解决方案。问题是您无法完全禁用标题导航，但您可以阻止它在某个时刻之前处于活动状态。

那一刻是form.invalid。

我的情况如下：用户需要在步骤内填写表单，按“保存”，然后才能使用NEXT按钮并进一步导航步进器（也返回）。

我所做的是介绍另一个hidden input，它将使用angular [required]动态属性。如果之前的required条件不成功，则只会save。一旦成功，该字段将不是required，用户可以进一步导航。

与mat-stepper（或md-stepper）属性editable一起，你应该能够达到你想要的效果。

如果您完全理解这个想法，请告诉我。

Answer 5

没有 :: ng-deep

不能工作

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

Answer 6

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

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

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

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

样式实现的示例：

my-custom-elements.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 7

这里.xlsm

在样式表上使用它删除步进标题...就像步骤1，步骤2

Answer 8

首先，您需要在组件配置中添加 ViewEncapsulation.None

@Component({
 selector: 'app-example',
 encapsulation: `ViewEncapsulation.None`
 })

然后将其添加到组件CSS中。

.mat-horizontal-stepper-header-container  {
  display: none !important;
 }

Answer 9

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

此外，::ng-deep是deprecated，并且如果要使用CSS进行操作，则首选将ViewEncapsulation设置为none。

导入ViewEncapsulation并在您的

中将其设置为None

compnent.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

component.css ：

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

这里是DEMO。

Answer 10

您需要添加＆＃34;线性＆＃34;属性（这将禁用导航）

<mat-vertical-stepper linear>

Answer 11

在代码中添加[linear] =“ true”

<mat-horizontal-stepper labelPostion="botton" [linear]="true">
...
</mat-horizontal-stepper>

angular material stepper：禁用标题导航

11 个答案: