如何移除Angular Material分页器按钮的涟漪效果？

方法一：组件内CSS样式穿透（推荐） #

在当前组件的SCSS文件中添加以下样式，通过::ng-deep穿透Angular的样式封装，定位到分页器的导航按钮并隐藏涟漪元素：

::ng-deep .mat-paginator-navigation-previous,
::ng-deep .mat-paginator-navigation-next {
  .mat-ripple {
    display: none !important;
  }
}

也可以通过设置涟漪透明度为0达到相同效果：

::ng-deep .mat-paginator-navigation-previous .mat-ripple,
::ng-deep .mat-paginator-navigation-next .mat-ripple {
  opacity: 0 !important;
}

方法二：通过代码手动禁用按钮涟漪 #

如果CSS方法不生效，可通过ViewChild获取分页器实例，在组件初始化完成后找到内部图标按钮并设置disableRipple属性：

1. 在组件类中引入依赖并定义ViewChild：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatIconButton } from '@angular/material/button';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('paginator') paginator!: MatPaginator;

  ngAfterViewInit(): void {
    // 获取分页器的前后导航按钮元素
    const buttons = this.paginator._elementRef.nativeElement.querySelectorAll('.mat-paginator-navigation-previous, .mat-paginator-navigation-next');
    
    buttons.forEach((buttonEl: HTMLElement) => {
      // 获取按钮组件实例并禁用涟漪
      const buttonInstance = buttonEl['_componentInstance'] as MatIconButton;
      if (buttonInstance) {
        buttonInstance.disableRipple = true;
      }
    });
  }

  // 你的changePage方法逻辑
  changePage(event: any) {
    // ...
  }
}

注意：方法二依赖Angular Material内部私有属性（如_elementRef、_componentInstance），后续版本更新可能失效，优先推荐CSS方法。

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