我目前正在向我的应用程序菜单的按钮添加徽章，这已经可以正常工作了。我想显示用户仍然需要查看的通知数量，如下所示：
<span matBadge="4" matBadgeColor="warn">Look at these notifications!</span>
但在手机上，菜单隐藏在汉堡图标后面。我不希望用户在这个图标上显示他有多少通知。我只是想让他知道他有一些，当他打开菜单时，他会在各个按钮上看到一个带有通知数量的徽章。
我的问题是总是隐藏一个空的徽章。我似乎无法像这样显示它：
<span matBadge="" matBadgeColor="warn">Look at these notifications!</span>
就不能显示一个空的徽章吗？我错过了什么，还是这种行为是设计使然？
【问题讨论】：
标签： angular angular-material badge
使用[matBadgeHidden] = "true" 动态控制matBadge 的可见性，
例如：
<span [matBadgeHidden] = "commentCount == 0" [matBadge]="commentCount" matBadgeColor="warn" matBadgeOverlap="false">Comments</span>
【讨论】：
matBadge 的值为空，Badge 组件默认隐藏徽章，无论matBadgeHidden 的值如何。
matbadgehidden 也出现在文档中，不知道为什么，但该指令在某些情况下没有隐藏徽章，如果其他人面临同样的问题，请告诉我
您可以在下面添加 css 以显示空徽章。
.mat-badge-hidden .mat-badge-content:empty {
display: inline-block;
}
看看下面的例子。
【讨论】：
您必须为自己添加一个类来隐藏文本。 mat-badge 没有隐藏内容的功能。空格或&nbsp; 不起作用：
.mat-badge.hide-text .mat-badge-content {
color: transparent;
}
<span matBadge="0" matBadgeColor="warn" class="hide-text">Look at these notifications!</span>
更新：
如果你真的不想使用某个类，可以使用&#8288;。这是一个所谓的WORD JOINER。里程可能因 Angular 版本而异 :)，但这将打印一个空徽章
<span matBadge="⁠" matBadgeColor="warn">Look at these notifications!</span>
【讨论】：
[matBadge]="variable"，如果您在代码中的某处设置variable = ""，您可以轻松关闭徽章。
在查看source for the badge component 时，由于线条的原因，看起来这是设计使然：
'[class.mat-badge-hidden]': 'hidden || !_hasContent',
...
this._hasContent = value != null && `${value}`.trim().length > 0;
看起来您可以使用matBadge="&#8203;" 来显示一个空的徽章来解决这个问题。
【讨论】：