如何在"下面之后"中设置垫子-迷你晶圆厂，如matBadge

Question

我想在另一个按钮的角落里显示mat mini fab按钮，比如matBadge风格的

示例：

https://stackblitz.com/edit/angular-prtfqp?file=src%2Fapp%2Fbutton-overview-example.html

我之所以不简单地使用matBadge，是因为我希望它像按钮一样可以点击
。

如果有一种方法可以使matBadge可点击并运行具有(click)属性的函数，那么它也是一个很好的选项

Answer 1

您只想添加"价值之前？为什么不使用示例中的第二个按钮，在值之前加上"+"，例如：

<button mat-raised-button color="primary"
matBadge="+8" matBadgePosition="below after" matBadgeColor="accent">
Action
</button>

或ts文件中的值：

<button mat-raised-button color="primary"
[matBadge]="'+' + value" matBadgePosition="below after" matBadgeColor="accent">
Action
</button>

更改问题后编辑：

1. 添加按钮和垫子图标的示例类：

   <button mat-mini-fab color="accent" class="custom-mat-mini-fab" 
   aria-label="Example icon button with a plus one icon">
   <mat-icon style="icon24" class="custom-mat-icon">
   plus_one
   </mat-icon>
   </button>
   

2. 添加了示例样式：

   .custom-mat-mini-fab {
   position: absolute;
   top: 25px;
   left: 70px; 
   width: 20px;
   height: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   }
   .custom-mat-icon {
   font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   }
   

如果你只想调用嵌套按钮方法(不想调用父按钮方法(，你需要添加$event.stopPropagation((方法。例如：

(click)="onMatMiniFabClicked(); $event.stopPropagation()"