如何处理Angular2中的mousewheelup / down事件？

Question

说，我想在鼠标滚轮上增加SVG圆的半径，并在鼠标滚轮时减小，我该如何实现呢？

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