Angular 9 - Удалить значок по умолчанию (создать) на Angular Material Stepper - PullRequest
Новая
       33

Angular 9 - Удалить значок по умолчанию (создать) на Angular Material Stepper

0 голосов
/ 27 марта 2020

Я сталкиваюсь с этой досадной проблемой с 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 документации

Хорошо, теперь позвольте мне представить проблему с несколькими изображениями:

First step, create icon instead of gavel icon

Second step, same situation of first one. create icon instead of contact_support icon

...and of course, same annoying behaviour

Просто посмотрите на круги, они должны иметь свои собственные значки (gavel, constact_support, forum). Но когда я нахожусь на одном из этих шагов, он заменяет значок на другой, а точнее на create icon .

Теперь, если я вернусь ко второму шагу, в по кругу появляется правильный значок, без этой надоедливой перезаписи:

enter image description here

Я уже пробовал:

  1. Установить [completed]=false в компоненте <mat-step>, но он просто убирает значок галочки в предыдущих кругах
  2. Переопределяет значок: 
<ng-template matStepperIcon="edit">
  <mat-icon>gavel</mat-icon>
</ng-template>

Но это бесполезно, поскольку он просто переопределяет значок, так что проблема все еще существует. Я также пытался оставить <mat-icon></mat-icon> пустым, но, конечно, он просто оставляет пустой значок в круге.

То, чего я пытаюсь добиться, это обойти эту "автоматическую перезапись" c. Есть идеи?

...