Угловой Материал - Пустой Знак

Question

Я сейчас добавляю значки к кнопкам меню моего приложения, которое уже отлично работает.Я хочу отобразить количество уведомлений, на которые пользователь все еще должен выглядеть следующим образом:

<span matBadge="4" matBadgeColor="warn">Look at these notifications!</span>

Хотя на мобильном телефоне меню скрыто за значком бургера.Я не хочу, чтобы пользователь показывал, сколько уведомлений у него есть над этим значком.Я только хочу, чтобы он знал, что он есть, и когда он откроет меню, он увидит значок с количеством уведомлений на различных кнопках.

Моя проблема в том, что пустой значок всегда скрыт.Кажется, я не могу показать это так:

<span matBadge="" matBadgeColor="warn">Look at these notifications!</span>

Разве вообще невозможно показать пустой значок?Я что-то упустил, или это поведение задумано?

Answer 1

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

'[class.mat-badge-hidden]': 'hidden || !_hasContent',
...
this._hasContent = value != null && `${value}`.trim().length > 0;

Похоже, вы можете использовать matBadge="​" дляиметь обход пустых бейджей, чтобы обойти это.

Answer 2

Вы можете добавить ниже css для отображения пустого значка.

.mat-badge-hidden .mat-badge-content:empty {
  display: inline-block;
}

Посмотрите на приведенный ниже пример.

https://stackblitz.com/edit/angular-mat-badge-with-pipe

Answer 3

Вы должны будете добавить класс для себя, чтобы скрыть текст.Мат-значок не имеет функции, чтобы скрыть содержимое.Пробел или   не будут работать:

.mat-badge.hide-text .mat-badge-content {
  color: transparent;
}

<span matBadge="0" matBadgeColor="warn" class="hide-text">Look at these notifications!</span>

Обновление:

Если вы действительно не хотите использовать класс, вы можете использовать ⁠.Это так называемый WORD JOINER .Пробег может варьироваться в зависимости от версии Angular :), но при этом будет напечатан пустой значок

<span matBadge="&#8288;" matBadgeColor="warn">Look at these notifications!</span>