拖动时 Angular Material Slider 数据绑定(bind)

Question

我正在尝试使用 Material slider 来控制音频音量。就像 YouTube 音频 slider 一样。我像这样使用两种方式的数据绑定(bind):

  <mat-slider min="0" max="1" step="0.01" [(value)]="settingsService.audioTick.volume"></mat-slider>

问题是，只有当我停止拖动 slider 时，该值才会更新。这是一种糟糕的用户体验，因为我不会立即听到音量是否合适。所以我不知何故需要在拖动时进行数据绑定(bind)。

这是一个 StackBlitz:https://stackblitz.com/angular/rojampjmlap

有什么想法吗？

Answer 1

您可以使用 [value] 属性绑定(bind)语法将 someValue 作为 @Input 传递给 MatSlider . MatSlider 有一个名为 input 的 @Output 属性，当 input 值改变时触发。您可以收听它并简单地将作为 $event 数据返回的任何内容重新分配给 someValue。

在这里，试一试:

模板:

<mat-slider 
  (input)="someValue = $event.value" 
  [value]="someValue">
</mat-slider>

{{ someValue }}

组件:

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

@Component({...})
export class SliderOverviewExample {
  someValue = 0;
}

这是更新的 Sample StackBlitz供您引用。