滑动时获取Angular Material v2滑块的值 [英] Get Angular Material v2 slider's value while sliding
问题描述
我正在组件中使用Angular Material v2 md-slider
I am using Angular Material v2 md-slider
in a component
@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
方法,但是仅当我停止滑动并释放鼠标按钮时.
and myValue
updates just fine and onChange
method is being called but only when I stop sliding and release the mouse button.
有没有一种方法可以更新myValue
并在我滑动滑块时也具有调用该功能的功能?
Is there a way to have myValue
update and also have the function called as I am sliding the slider?
我注意到aria-valuenow
属性随着滑行而变化,但是我不确定如何根据需要使用它(如果可以使用的话).
I have noticed aria-valuenow
attribute which is changing as I am sliding but I am not quite sure how to make a use of it for what I need (if it can be used at all).
推荐答案
好问题.此类功能已添加到Angular Material中.参见此提交.
Great question. Such a functionality has been added to Angular Material. See this commit.
在您的情况下,您不会听(change)
事件,而是听(input)
事件.这是一个示例:
In your case, you would not listen to the (change)
event but rather to the (input)
event. Here is an example:
<mat-slider (input)="onInputChange($event)"></mat-slider>
onInputChange(event: MatSliderChange) {
console.log("This is emitted as the thumb slides");
console.log(event.value);
}
这篇关于滑动时获取Angular Material v2滑块的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!