Angular Material Stepper组件可防止执行所有未访问的步骤

Question

我正在使用Angular Material Stepper组件。

在我的内容中，我有单独的按钮，当当前步骤中的任务完成时，这些按钮可以帮助用户移至下一步。

我想防止用户通过单击步进器组件的步骤按钮来访问下一步。

但是，我希望用户能够通过步进器组件的步进按钮返回上一步。

我不在步进器内使用表格。我已经看到了组件的Linear属性，但是它不符合我的要求。

简而言之，通过单击步进器组件的步骤按钮来防止用户进入“未访问”的步骤。

Answer 1

我发现此问题的解决方案是使用completedstep的属性。请参阅下面给出的代码行：

<mat-step [completed]="isCompleted">

如果isCompleted为true，则将启用下一步。

注意：要使此功能起作用，步进器组件必须处于linear模式。这可以通过linear在stepper组件上设置属性来完成，例如

<mat-horizontal-stepper linear>