如何使用 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 中工作正常。

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

How can I use material-ripple to create a button-like component?

dart

angular-dart