滑动时获取 Angular Material v2 滑块的值答案

【问题标题】：Get Angular Material v2 slider's value while sliding滑动时获取 Angular Material v2 滑块的值
【发布时间】：2017-06-13 07:13:36
【问题描述】：

我在组件中使用 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 更新并在我滑动滑块时调用该函数？

我注意到aria-valuenow 属性在我滑动时会发生变化，但我不太确定如何根据需要使用它（如果可以使用的话）。

【问题讨论】：

标签： angular angular-material2

【解决方案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);
}

【讨论】：

太棒了！ Material beta.2 的发布时间有规定吗？
这个还不知道。抱歉 - 下周可能会有新版本。
但是总有一种方法可以使用 Material 2 的超最新版本。您可以使用 material2-builds | npm install --save github.com/angular/material2-builds.git
上面的小错字，应该是 (input)= 并且它是 npm install --save https://... （https不出现）。但是谢谢，它工作正常。
这仍然适用于当前版本的 Material (5.2.0)。发出的$event 对象属于MatSliderChange 类。您可以像这样访问它的 value 属性：console.log(event.value)。如果要在 mouseup 上获取事件，可以使用 (ngModelChange)，并使用 (input) 获取拖动时发出的事件流。

【解决方案2】：

我试图在我的组件中获取 mat-slider 值，我通过使用 event.value 得到它，如下所示。提交此答案以帮助像我这样的人:) 谢谢

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

onInputChange(event: any) {
  console.log(event.value);
}

【讨论】：

这看起来像是一个答案，但它并不试图回答这个问题。它只是确认@DevVersion 在 2017 年 1 月 28 日 9:54 提供的答案的有效性。