我在使用 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 上找到的示例 documentation
那么现在我用几张图来介绍问题:
看看圆圈,它们里面应该有自己的图标(gavel、constact_support、forum)。但是当我执行其中一个步骤时,它会将图标替换为另一个图标,准确地说是创建图标。
现在,如果我回到第二步,进入圆圈会生成正确的图标,而不会出现这种恼人的覆盖:
我已经试过了:
- 设置
[completed]=false
在<mat-step>
组件,但它只是删除了以前圈子中的复选图标 - 覆盖图标:
<ng-template matStepperIcon="edit">
<mat-icon>gavel</mat-icon>
</ng-template>
但它没有用,因为它只是覆盖了图标,所以问题仍然存在。我也试图离开 <mat-icon></mat-icon>
空的,但当然它只是在圆圈中留下一个空白图标。
我想要实现的是绕过这种“自动覆盖”。有什么想法吗?
最佳答案
here是对我有用的解决方案
<mat-horizontal-stepper #stepper>
<mat-step label="Information">...</mat-step>
<mat-step label="Groups">...</mat-step>
<mat-step label="Validate">...</mat-step>
<ng-template matStepperIcon="number" let-index="index">
<mat-icon>{{index === 0 ? 'perm_contact_calendar' : index === 1 ? 'group' : 'done'}}</mat-icon>
</ng-template>
</mat-horizontal-stepper>
@Component({
selector: 'app-stepper-component',
templateUrl: './stepper.component.html',
styleUrls: ['./stepper.component.scss']
})
export class StepperComponent implements AfterViewInit {
@ViewChild('stepper') stepper: MatHorizontalStepper;
ngAfterViewInit() {
this.stepper._getIndicatorType = () => STEP_STATE.NUMBER;
}
}
或者,覆盖 matStepperIcon="number"
和 matStepperIcon="edit"
:
<mat-horizontal-stepper>
<mat-step label="Information">...</mat-step>
<mat-step label="Groups">...</mat-step>
<mat-step label="Validate">...</mat-step>
<ng-template matStepperIcon="number" let-index="index">
<mat-icon>{{index === 0 ? 'perm_contact_calendar' : index === 1 ? 'group' : 'done'}}</mat-icon>
</ng-template>
<ng-template matStepperIcon="edit" let-index="index">
<mat-icon>{{index === 0 ? 'perm_contact_calendar' : index === 1 ? 'group' : 'done'}}</mat-icon>
</ng-template>
</mat-horizontal-stepper>
关于Angular 9 - 删除 Angular Material Stepper 上的默认图标(创建),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60876479/