如何使用材質波紋創建按鈕式組件？

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中工作正常。