角材料-空徽章

Question

我目前正在将徽章添加到应用程序菜单的按钮上，该按钮已经可以正常工作了。我想显示用户仍然需要看的通知数量：

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

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

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

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

根本不可能显示空徽章吗？我是否缺少某些东西，或者这是设计使然？

Answer 1

使用[matBadgeHidden] = "true"了动态控制的知名度matBadge，如：

<span [matBadgeHidden] = "commentCount == 0"  [matBadge]="commentCount" matBadgeColor="warn" matBadgeOverlap="false">Comments</span>

Answer 2

您将不得不为自己添加一个类以隐藏文本。垫子徽章没有隐藏内容的功能。空格还是 不起作用：

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