我遇到了一个很烦人的问题,与Angular有关:我通过将其添加到页面的
这是HTML页面(只是一部分,复制/粘贴了7个元素):
但这是无用的,因为它只是覆盖了图标,所以问题仍然存在。我也尝试将
我想要实现的是绕过这个“自动覆盖”。有任何想法吗?
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 文档中可以找到的示例。
现在让我用几张图片介绍一下问题:
只需看看这些圆圈,它们应该有自己的图标(木槌、联系支持、论坛)。但当我处于其中一个步骤时,它会用另一个图标替换它,确切地说是用创建图标替换。
现在,如果我回到第二步,圆圈中就会生成正确的图标,而不会出现这种烦人的覆盖:
我已经尝试过:- 在
<mat-step>
组件上设置[completed]=false
,但这只会将之前的圆圈中的勾号去掉。 - 覆盖图标:
<ng-template matStepperIcon="edit">
<mat-icon>gavel</mat-icon>
</ng-template>
但这是无用的,因为它只是覆盖了图标,所以问题仍然存在。我也尝试将
<mat-icon></mat-icon>
留空,但当然它只会在圆圈里留下一个空白的图标。我想要实现的是绕过这个“自动覆盖”。有任何想法吗?