我在 Angular 中遇到了这个恼人的问题:我通过添加到provides
页面的:
provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false, showError: true}
这是 HTML 页面(只是一小部分,有 7 个元素复制/粘贴):
<mat-horizontal-stepper>
<!-- AREA -->
<mat-step label="Step 1" state="area">
<p>Put down your phones</p>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<!-- QUESTION -->
<mat-step label="Step 2" state="question">
<p>Socialize with each other</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
<!-- MODE -->
<mat-step label="Step 3" state="mode">
<p>Socialize with each other</p>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</mat-step>
...
<!-- Icon overrides -->
<!-- AREA -->
<ng-template matStepperIcon="area">
<mat-icon>gavel</mat-icon>
</ng-template>
<!-- QUESTION -->
<ng-template matStepperIcon="question">
<mat-icon>contact_support</mat-icon>
</ng-template>
<!-- MODE -->
<ng-template matStepperIcon="mode">
<mat-icon>forum</mat-icon>
</ng-template>
...
正如你所看到的,这只是你可以在 Angular 9 上找到的示例文档 https://material.angular.io/components/stepper/overview#step-states
好了,现在我用几张图片来介绍一下这个问题:
只要看看圆圈,他们应该有自己的图标(木槌、constact_support、论坛)。但是,当我执行其中一个步骤时,它会将图标替换为另一个图标,准确地说是创建图标.
现在,如果我回到第二步,在圆圈中生成正确的图标,而不会出现这种烦人的覆盖:
我已经尝试过:
- Set
[completed]=false
on <mat-step>
组件,但它只是删除了前面圆圈中的复选图标
- 覆盖图标:
<ng-template matStepperIcon="edit">
<mat-icon>gavel</mat-icon>
</ng-template>
但它没有用,因为它只是覆盖了图标,所以问题仍然存在。我也曾尝试离开<mat-icon></mat-icon>
空的,但当然它只是在圆圈中留下一个空白图标。
我想要实现的是绕过这种“自动覆盖”。任何想法?