Angular 将多个 Angular Material Badges 添加到组件中

Question

有没有办法向一个组件添加多个徽章？

目前我一次只能拥有一个徽章，如下例所示：

<mat-card [ngClass] = "{'custom-card':true}" [matBadge] ="folderContent.length" matBadgePosition="after" matBadgeSize="large" matBadgeColor="accent" matBadgeOverlap="true" >
    
    <mat-card-title>{{folderCaption}}</mat-card-title>
    <mat-card-subtitle>{{folderSubtitle}}</mat-card-subtitle>
    <mat-card-content>{{folderDescription}}</mat-card-content>

</mat-card>

Answer 1

我成功地通过封装 HTML 元素来重叠 2 个徽章，如下所示：

<div matBadge="4" matBadgeOverlap="false" matBadgePosition="below before"
           matBadgeSize="small">
    <div matBadge="2" matBadgeColor="accent" matBadgePosition="below before"
           matBadgeSize="small">
        Some text
    </div>
</div>