Angular 9-删除Angular Material Stepper上的默认图标(创建) [英] Angular 9 - Remove default icon (create) on Angular Material Stepper

问题描述

我遇到了Angular的烦人问题:我通过添加到页面的 providers 中来覆盖步进器图标:

 提供:STEPPER_GLOBAL_OPTIONS，useValue:{displayDefaultIndicatorType:false，showError:true} 

这是HTML页面(只是一块，复制/粘贴了7个元素):

 < mat-h​​orizo​​ntal-stepper><！-区域->< mat-step label =步骤1" state =区域">< p>放下电话</p>< div><按钮垫-按钮垫StepStepNext>下一步</button></div></mat-step><！-问题->< mat-step label =步骤2" state =问题">< p>彼此交往</p>< div><按钮垫-按钮matStepperPrevious>后退</button><按钮垫-按钮垫StepStepNext>下一步</button></div></mat-step><！-模式->< mat-step label =步骤3" state =模式">< p>彼此交往</p>< div><按钮垫-按钮matStepperPrevious>后退</button><按钮垫-按钮垫StepStepNext>下一步</button></div></mat-step>...<！-图标覆盖-><！-区域->< ng-template matStepperIcon ="area">< mat-icon>木槌< mat-icon></ng-template><！-问题->< ng-template matStepperIcon ="question">< mat-icon> contact_support</mat-icon></ng-template><！-模式->< ng-template matStepperIcon ="mode">< mat-icon>论坛//mat-icon></ng-template>... 

如您所见，这只是您可以在Angular 9上找到的示例.

只看圈子，他们应该在自己的图标(木槌，constact_support，论坛)内.但是，当我处于其中一个步骤时，它将用另一个图标替换图标，具体来说，请创建图标.

现在，如果我回到第二步，则在圆圈中生成正确的图标，而无需进行烦人的覆盖:

我已经尝试过:

1. 在< mat-step> 组件上设置 [completed] = false ，但它只是将选中图标移到了先前的圆圈中
2. 覆盖图标:

 < ng-template matStepperIcon ="edit">< mat-icon>木槌< mat-icon></ng-template> 

但是它没用，因为它只是覆盖了图标，因此问题仍然存在.我还尝试将< mat-icon></mat-icon> 保留为空，但是当然，它只是在圆圈中留了一个空白图标.

我要实现的目标是绕过此自动覆盖".有什么主意吗?

解决方案

< mat-h​​orizo​​ntal-stepper#stepper>< mat-step标签=信息" ...</mat-step>< mat-step标签=组" ...</mat-step>< mat-step标签=验证" ...</mat-step>< ng-template matStepperIcon ="number"let-index ="index">< mat-icon> {{index === 0?'perm_contact_calendar':索引=== 1吗?'group':'done'}}</mat-icon></ng-template></卧式步进器>

 <代码> @Component({选择器:"app-stepper-component"，templateUrl:"./stepper.component.html"，styleUrls:['./stepper.component.scss']})导出类StepperComponent实现AfterViewInit {@ViewChild('stepper')stepper:MatHorizo​​ntalStepper;ngAfterViewInit(){this.stepper._getIndicatorType =()=>STEP_STATE.NUMBER;}} 

或者，覆盖 matStepperIcon =" number" 和 matStepperIcon =" edit" :

 < mat-h​​orizo​​ntal-stepper>< mat-step标签=信息" ...</mat-step>< mat-step标签=组" ...</mat-step>< mat-step标签=验证" ...</mat-step>< ng-template matStepperIcon ="number"let-index ="index">< mat-icon> {{index === 0?'perm_contact_calendar':索引=== 1吗?'group':'done'}}</mat-icon></ng-template>< ng-template matStepperIcon ="edit"let-index ="index">< mat-icon> {{index === 0?'perm_contact_calendar':索引=== 1吗?'group':'done'}}</mat-icon></ng-template></卧式步进器> 

I'm facing this annoying problem with Angular: I overrode stepper icons by adding in to the provides of the page:

provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false, showError: true}

This is the HTML page (just a piece, there are 7 elements copy/pasted):

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

As you can see, it's just the example you can find on Angular 9 documentation

Well, now let me introduce the problem with several image:

Just look at the circles, they should have inside their own icons (gavel, constact_support, forum). But when I'm on one of those steps, it replaces the icon with another one, to be precise with create icon.

Now, if I come back to the second step, into the circle spawn the correct icon, without this annoying overwriting:

I already tried:

1. Set [completed]=false on <mat-step> component, but it just remove the check icon in to the previous circles
2. Override the icon:

<ng-template matStepperIcon="edit">
  <mat-icon>gavel</mat-icon>
</ng-template>

But it's useless since it just overrides the icon, so the problem still exists. I also tried to leave the <mat-icon></mat-icon> empty, but of course it just leaves a blank icon in to the circle.

What I'm trying to achieve is by-pass this "automatic overwriting". Any idea?

解决方案

here is the solution it works for me

<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;
  }
}

Alternatively, override for both matStepperIcon="number" and 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上的默认图标(创建)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！