有没有办法在Angular 2中监听输入范围的变化？

Question

我正在使用Angular 2.0开发一个应用程序,我不知道如何监听输入范围的变化.

这是组件:

import { Component } from '@angular/core';

@Component({
  selector: 'zoom-slider',
  styleUrls: [
    './zoom-slider.style.scss'
  ],
  template: `
    <div class="zoom-slider">
      <input type="range" max="5" (click)="changeZoom"/>
    </div>
  `
})
export class ZoomSlider {

  changeZoom() {
    console.log('change slider');
  }

}

这不起作用.

提前致谢!

Answer 1

您需要侦听change事件并引用输入.

<input type="range" #ref (change)="changeZoom(ref.value)"/>

changeZoom(value: number) { ... }

Answer 2

我想其中一个应该有效

<input type="range" max="5" (input)="changeZoom($event)"/>
<input type="range" max="5" (change)="changeZoom($event)"/>

如果你传递上述功能也(click)可以.