如何使用 material-ripple 创建类似按钮的组件？

Question

我想创建一个带有波纹动画的类似按钮的组件，它看起来像这样：

<div>Button</div> 
<material-ripple></material-ripple>

过去，这很好用，因为当我单击此自定义元素时，我实际上单击了material-ripple，并且单击事件冒泡到宿主元素。

从 angular_components 0.5.1 开始，material-ripple 在按键上显示居中的波纹。这与单击不同，因为事件目标是宿主元素本身，而不是波纹组件。

有没有办法可以将按键事件传递给material-ripple，以便播放波纹动画？或者有没有办法以编程方式播放动画？

Answer 1

经过一番研究，我想出了一个使用 dart:html 的解决方案。

@ViewChild(MaterialRippleComponent, read: ElementRef)
ElementRef materialRipple;

@HostListener('keydown', const [r'$event'])
void passKeyDown(KeyboardEvent event) {
  (materialRipple.nativeElement as HtmlElement).dispatchEvent(
      new KeyEvent('keydown', keyCode: event.keyCode, canBubble: false)
          .wrapped);
}

虽然由于 KeyEvent 和 KeyboardEvent 的一些错误，这在 Dartium 中不起作用，但它在 Chrome 中可以正常工作。