如何禁用Angular Material中matBadge的动画效果？

你之前的CSS没生效主要有两个原因：一是Angular Material的徽章类名是连字符命名（不是驼峰格式），二是Angular的视图封装机制会限制组件内样式穿透到第三方组件内部。可以用以下两种方式解决：

方式一：在组件样式中使用::ng-deep穿透视图封装 #

::ng-deep .mat-badge {
  transition: none !important;
}

::ng-deep .mat-badge-content {
  transition: none !important;
}

方式二：将样式放到全局样式文件（如styles.css） #

如果不想用::ng-deep，可以把样式直接写在项目根目录的全局样式文件里，这样能直接作用到所有Material组件：

.mat-badge {
  transition: none !important;
}

.mat-badge-content {
  transition: none !important;
}

修改完成后，点击图标时matBadge内的数字会静态更新，不会触发过渡动画。

内容的提问来源于stack exchange，提问作者Valerija