Angular 角度材质步进器：禁用收割台导航

我只想通过“下一步”和“上一步”按钮导航步进器

我无法让它工作，因为用户还可以单击每个步骤标签导航到任何步骤。我不能使用线性，因为它要求每个步骤都有一个

formArray

或

FormGroup

我尝试了

您需要添加一个“线性”属性（这将禁用导航）

---

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

那一刻是

形式。无效的

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

我所做的是引入另一个
隐藏的
输入
，它将使用angular的
[required]
动态属性。只有在先前的
保存
条件不成功时，才需要
保存。一旦成功，此字段将不再是
必需的
，用户可以进一步导航

与mat stepper（或md stepper）属性一起
可编辑
您应该能够实现您想要的

如果你完全理解这个想法，请告诉我
 将其添加到样式表中。我试图禁用标题导航。尝试了很多东西，但这次黑客成功了。您可以尝试此功能，直到Angular Material团队支持此功能为止

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

只是为了改进公认的答案，因为如果你有一个垂直步进机，它将不起作用

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

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

这将确保其适用于
mat水平步进机收割台
，
mat垂直步进机收割台
，如果没有：ng deep

：：ng deep.mat水平步进式割台{
指针事件：无！重要；
}
在标签中添加[linear]=“true”


...
使用
线性
步进器执行
completed=false
步进。当用户按下按钮时，以编程方式完成该步骤并进入下一步

这样，您就不需要处理CSS指针事件。在我们的应用程序中，这导致了NVDA的可访问性问题


第一步
步骤2
导出类AppComponent实现OnInit{
@ViewChild（“步进器”）步进器：MatStepper；
下一次单击（事件）{
//完成当前步骤
this.stepper.selected.completed=true；
//进入下一步
this.stepper.next（）；
}
}
此处
：：ng deep.mat水平步进机收割台容器{
显示：无；
}

在样式表上使用此选项删除步进标题…如步骤1、步骤2，首先需要在组件配置中添加视图封装。无

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

然后将其添加到组件CSS中

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

不要使用：：ng deep，因为它已被弃用


相反，如果您使用的是角度材质，请使用文档中的主题指南


样式的实现示例：

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"]
...

如果
：：ng deep
不起作用，对于仍在寻找替代解决方案的任何人

此外，
：：ng deep
是，如果您想使用CSS，将
视图封装设置为none是首选方法

导入
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() {}
}

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

在您的数据库中将
指针事件设置为
none

组件.css：

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

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

单击“下一步”和“上一步”按钮或标题标签时，.
原因错误
无法读取未定义的属性“无效”
。使用
线性
意味着添加表单，这是步进机的基本思想。。。但我不需要每个步骤都有一个表单。您是否成功地找到了解决方案？这不起作用，我仍然可以使用header@Mel请在main style.css或style.scs的末尾添加这段代码。会的work@ShahzaibShahid为什么将其添加到组件的scss文件不起作用？为什么它必须是shared style.scss文件？@KaMok这是因为我们正在覆盖指定类的CSS，所以它应该在父级，以便可以被覆盖。如果使用ng deep:：：ng deep.mat horizontal stepper header{…}这是正确的方法。很酷的解决方案！请注意，一旦用户进入第二步（这可能是您需要的），它不会阻止用户返回第一步。为此，您可以将
editable=“false”
添加到
mat-step
sNice解决方案中！谢谢，我怎样才能只为我的angular应用程序中的一个组件进行自定义？请在其上添加其他类。并使用类规范（然后您可以在该组件的SCS内定义mixin，说它是一种特定样式是更好的代码实践）谢谢！我有一个嵌套的步进器，你在这里提到的封装特性使所有的差异（y）