Angular Material md-button 在鼠标按下而不是点击时出现波纹

Question

我一直在使用 Angular Material，但运行遇到了问题。该文档对很多事情都非常模糊，所以希望有人可以在这里帮助我。这是我正在尝试做的事情：

目前，如果我将其放入 HTML，

<button md-button>Click me</button>

连锁反应发生在 mouseup 上。有什么办法可以将其更改为 mousedown 吗？

这是我试过的：

<button 
    md-button 
    #nextButton 
    (click)="alertHelloWorld()" 
    (mousedown)="nextButton.focus()">
Hello World! I should ripple on mousedown
</button>

虽然这似乎不起作用。

有什么帮助吗？

Answer 1

您可以尝试使用 MdRipple 指令手动触发它。

组件：

export class YourComponent {
  @ViewChild(MdRipple) ripple: MdRipple;

  rippleButton () {
    this.ripple.launch(0, 0, { centered: true });
  }

模板：

<button md-ripple (mousedown)="rippleButton()"> ... </button>

NgModule:

imports: [
  ...
  MdRippleModule,
  ...
],

我还没有测试过代码，但是查看 GitHub 存储库上的文档给出了这样一个想法：

MdRipple demo

MdRipple documentation

Angular Material md-button 在鼠标按下而不是点击时出现波纹

Angular Material md-button ripple on mousedown instead of click

typescript

material-design

angular-material2

angular