徽章（Badge）是 Angular Material 中的一个组件，常用于显示数量、状态等信息。在 Angular Material 7 中，徽章组件可以用于按钮、标签、图标等元素上。

要使用 Angular Material 的徽章组件，需要先导入它：

import { MatBadgeModule } from '@angular/material/badge';

然后在你的模块中添加它：

@NgModule({
  imports: [
    MatBadgeModule
  ],
  declarations: [/* ... */],
  bootstrap: [/* ... */]
})
export class AppModule { }

接下来就可以在模板中使用徽章了：

home


Inbox


Messages

在这个例子中，我们展示了三种不同的用法：

• 作为图标，可以使用 matBadgeOverlap 属性来控制徽章是否覆盖在图标上；
• 作为标签，可以使用 matBadgeColor 属性来指定徽章的颜色；
• 作为按钮，可以像按钮的其它属性一样使用 [matBadge] 绑定徽章的内容。

在这个例子中，徽章的内容都是静态的，但实际上我们可以使用动态数据来显示徽章，比如：

{{ unreadMessagesCount }} unread messages

这样，只要在组件中设置了 unreadMessagesCount 的值，就可以动态更新徽章的内容了。 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。