如何为Angular组件添加多个Angular Material徽章？

嘿，这个需求我之前做项目时刚好碰到过！Angular Material的matBadge指令确实默认一个元素只能绑定一个徽章，但咱们有几种简单有效的办法实现多徽章效果～

方法一：嵌套容器+CSS定位（最常用） #

核心思路是给目标组件（比如你的mat-card）添加多个带有matBadge的独立元素，然后用CSS把这些徽章定位到卡片的不同位置上。这样每个徽章都是独立的实例，完全不会互相干扰。

示例代码 #

<mat-card class="custom-card">
  <!-- 第一个徽章：右上角，大号 accent 色 -->
  <span class="badge badge-top-right"
        [matBadge]="folderContent.length"
        matBadgeSize="large"
        matBadgeColor="accent">
  </span>
  <!-- 第二个徽章：右下角，小号 warn 色 -->
  <span class="badge badge-bottom-right"
        [matBadge]="unreadItemsCount"
        matBadgeSize="small"
        matBadgeColor="warn">
  </span>

  <mat-card-title>{{folderCaption}}</mat-card-title>
  <mat-card-subtitle>{{folderSubtitle}}</mat-card-subtitle>
  <mat-card-content>{{folderDescription}}</mat-card-content>
</mat-card>

对应的CSS样式：

.custom-card {
  position: relative; /* 关键：让徽章相对于卡片进行绝对定位 */
  padding: 16px; /* 给徽章留出空间，避免遮挡卡片内容 */
}

.badge {
  /* 重置matBadge默认的inline布局，改为绝对定位 */
  position: absolute;
  transform: none !important; /* 覆盖matBadge自带的transform */
}

.badge-top-right {
  top: 8px;
  right: 8px;
}

.badge-bottom-right {
  bottom: 8px;
  right: 8px;
}

方法二：使用Overlay手动创建徽章（更灵活） #

如果你的需求更复杂（比如需要动态添加/移除徽章、自定义徽章样式），可以用Angular Material的Overlay API手动创建多个徽章实例，挂载到目标组件上。这种方式自由度更高，但需要写一点额外的逻辑。

核心思路 #

• 注入Overlay服务到组件中
• 为每个徽章创建一个OverlayRef，并配置好位置策略（比如相对于卡片的某个角落）
• 在OverlayRef中嵌入带有matBadge的模板或组件

不过对于大多数简单场景，方法一完全够用啦～

注意事项 #

• 调整徽章的top/right/bottom/left数值时，记得和卡片的内边距配合，避免遮挡内容
• 如果徽章出现层级问题，可以给.badge类加z-index: 100确保它在卡片内容上方

内容的提问来源于stack exchange，提问作者Walnussbär