原色、重音或警告、Angular 11、角材料时无按钮波纹效果答案

【问题标题】：No button ripple effect when color primary, accent or warn, Angular 11, angular-material原色、重音或警告、Angular 11、角材料时无按钮波纹效果
【发布时间】：2021-07-23 18:59:38
【问题描述】：

我有一个简单的 4 个按钮，棱角分明的材质，导入 BrowserAnimationsModule 等：

<button mat-button mat-raised-button > TEST </button>

<button mat-button mat-raised-button color="primary"> TEST primary</button>

<button mat-button mat-raised-button color="warn"> TEST warn</button>

<button mat-button mat-raised-button color="accent"> TEST accent</button>

只有第一个按钮具有可见的波纹效果。我尝试将 class="mat-app-background" 添加到正文或包装器中，但仍然没有效果。是不是这个版本的bug？

纯简单的项目，只有角度材料依赖： stackblitz demo

【问题讨论】：

从mat-raised-button 中删除mat-button。它会起作用的。更新Demo
非常感谢，1 天尝试了这么多事情。我发誓我正在将 docs demo 与我的代码进行比较，并没有注意到那里没有 mat-button 指令。
如果你愿意，我可以将其添加为答案。
当然可以，这是对这个问题的回答。

标签： angular angular-material

【解决方案1】：

从mat-raised-button 中删除mat-button 指令。它应该工作

【讨论】：

【解决方案2】：

您也可以通过添加以下属性来启用波纹效果，以防您只想使用 mat-button 而不是 mat-raised-button

<button 
   mat-button 
   [disableRipple]="false"  // Add this line
>
  Some Button 
</button>

对于 mat-button，disableRipple 将为 true。所以你可以禁用它并使用涟漪效应。

我在此处进行了更改，如果需要，您可以查看一次： https://stackblitz.com/edit/angular-ivy-z9rbag?file=src/app/app.component.html

【讨论】：