angular - 滑动时获取 Angular Material v2 slider 的值

Question

我在组件中使用 Angular Material v2 md-slider

@Component({
  selector: 'ha-light',
  template: `<md-slider min="0" max="1000" step="1" 
             [(ngModel)]="myValue" (change)="onChange()"></md-slider>
             {{myValue}}`,
  styleUrls: ['./light.component.css']
})
export class LightComponent implements OnInit {
  myValue = 500;

  constructor() { }

  ngOnInit() { }

  onChange(){
    console.log(this.myValue);
  }
}

和 myValue 更新得很好并且正在调用 onChange 方法，但仅当我停止滑动并释放鼠标按钮时。

有没有办法更新 myValue 并在我滑动 slider 时调用该函数？

我注意到 aria-valuenow 属性在我滑动时会发生变化，但我不太确定如何使用它来满足我的需要(如果它完全可以使用的话) .

Answer 1

好问题。这样的功能已经添加到 Angular Material 中。参见 this commit .

在您的情况下，您不会收听 (change) 事件，而是收听 (input) 事件。这是一个例子:

<mat-slider (input)="onInputChange($event)"></mat-slider>

onInputChange(event: MatSliderChange) {
  console.log("This is emitted as the thumb slides");
  console.log(event.value);
}