Angular 5结合Angular Material：按钮涟漪效果无法正常工作

嘿，我来帮你排查这个涟漪效果不工作的问题！你已经导入了MatButtonModule和BrowserAnimationsModule这些核心模块，但咱们可以从这几个常见方向逐一检查：

• 确认Angular与Material版本匹配
  不同版本的Angular Material和Angular框架有严格的兼容要求，如果版本不匹配，很可能导致交互功能异常。你可以打开package.json，检查@angular/material和@angular/core的版本号是否一致（比如都是16.x.x）。

• 必须引入Material主题样式
  涟漪效果的样式依赖Angular Material的主题变量，如果没有导入主题样式，涟漪会完全不显示。在你的全局样式文件（比如styles.scss或styles.css）中添加一行：

  @import "@angular/material/prebuilt-themes/indigo-pink.css";
  

  你也可以选择其他预构建主题，或者自定义主题，但至少要导入一个主题才能让Material的视觉交互生效。

• 使用正确的Material按钮标签
  别用普通的<button>标签啦，要触发Material的涟漪效果，必须使用Material封装的组件，比如：

  <!-- 普通按钮 -->
  <button mat-button>点我看涟漪</button>
  <!-- 凸起按钮 -->
  <button mat-raised-button>凸起按钮</button>
  

  只有带mat-button（或其他Material按钮指令）的元素才会绑定涟漪交互。

• 排查自定义样式的干扰
  如果你的按钮或父元素有自定义CSS，可能会阻止涟漪显示：

  • 避免给按钮设置pointer-events: none，这会禁用所有交互
  • 确保按钮的overflow属性是默认值或hidden（涟漪是在按钮内部生成的，overflow不为hidden可能导致涟漪被截断或不显示）
  • 检查是否有z-index设置过高的元素覆盖了涟漪层

• 确认HammerJS加载顺序正确
  虽然你已经导入了hammerjs，但要确保它在Angular应用启动前加载。建议在main.ts中先导入HammerJS，再启动AppModule：

  import 'hammerjs';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
  

先从导入主题样式和检查按钮标签这两点入手，这是最常见的问题根源，大概率能解决你的涟漪失效问题！

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