以编程方式触发 Angular 材质图标按钮上的波纹答案

【问题标题】：Programmatically trigger ripple on Angular material icon button以编程方式触发 Angular 材质图标按钮上的波纹
【发布时间】：2020-06-22 09:48:13
【问题描述】：

我有两个有角度的材质按钮。我的目标是以编程方式让按钮在按下某个键时产生波纹。

看看 stack-blitz 项目： https://stackblitz.com/edit/angular-material-button-vphppo

有没有办法让按钮在点击或按键时波动一次？

我尝试了这些示例 How can I programmatically trigger ripple effect on Angular MatListItem?

但这会让按钮在点击时产生两次涟漪。

【问题讨论】：

更新了下面的按键答案。
谢谢。我应该使用 @ViewChild('btnNext', {static: false}) btnNext: MatButton; 而不是 MatRipple

标签： angular angular-material

【解决方案1】：

MatButton 提供对当前 Material 中的Ripple 的直接访问：

  @ViewChild('btnNext', {static: false}) btnNext: MatButton;

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) { 
    if( event.key === 'a') {
      this.btnNext.ripple.launch({centered: true})
    }
  }

当按下 'a' 时，上面会触发波纹。

https://stackblitz.com/edit/angular-3xgxiw

【讨论】：

但它应该在 keydown 上产生涟漪。不是点击另一个按钮。