如何處理Angular2中的鼠標滾輪/停止事件？

Question

說，我想在mousewheeldown上增加一個SVG圓的半徑，並在mousewheeldown上減少，我該如何實現它？

<svg width="800" height="400"> 
    <circle 
    [attr.r]   ="cRadius" 
    (mousewheelup) ="cRadius = cRadius + 5" 
    (mousewheeldown) ="cRadius = cRadius - 5" 
    /> 
</svg> 

Answer 1

@Directive({ selector: '[circle]' }) 
export class MouseWheelDirective { 
    @Output() mouseWheelUp = new EventEmitter(); 
    @Output() mouseWheelDown = new EventEmitter(); 

    @HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) { 
    this.mouseWheelFunc(event); 
    } 

    @HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) { 
    this.mouseWheelFunc(event); 
    } 

    @HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) { 
    this.mouseWheelFunc(event); 
    } 

    mouseWheelFunc(event: any) { 
    var event = window.event ; 
    var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); 
    if(delta > 0) { 
     this.mouseWheelUp.emit(event); 
    } else if(delta < 0) { 
     this.mouseWheelDown.emit(event); 
    } 
    } 
}