如何使用材质波纹创建按钮式组件？

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); 
} 

虽然这并不在Dartium由于各地的KeyEvent和的KeyboardEvent一些bug的工作，它在Chrome中工作正常。