Angular Material - 空徽章

Question

我目前正在为我的应用程序菜单按钮添加徽章，这已经可以正常工作了。我想像这样显示用户仍然需要查看的通知数量:

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

不过在手机上，菜单隐藏在汉堡图标后面。我不希望用户在此图标之上显示他有多少通知。我只想让他知道他有一些，当他打开菜单时，他会在各个按钮上看到一个带有通知数量的徽章。

我的问题是空徽章总是隐藏的。我似乎无法像这样显示它:

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

难道根本不可能显示空徽章吗？我是否遗漏了什么，或者这种行为是设计使然？

Answer 1

您必须为自己添加一个类来隐藏文本。 mat-badge 没有隐藏内容的功能。空格或   将不起作用:

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