Question

我正在尝试使用材质滑块控制音频音量。就像YouTube音频滑块一样。我使用两种方式进行数据绑定：

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

问题是，仅当我停止拖动滑块时，该值才会更新。这是糟糕的用户体验，因为我无法立即听到声音是否足够好。因此，我需要在拖动时进行数据绑定。

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

有什么想法吗？

Answer 1

您需要绑定到input输出属性以获取实时数据更改。示例：

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

Answer 2

您可以使用[value]属性绑定语法将someValue作为@Input传递给MatSlider。 MatSlider具有一个定义为@Output的{{1}}属性，该属性在input值更改时被触发。您可以听一下，只需将作为input数据返回的内容重新分配给$event。

在这里，尝试一下：

模板：

someValue

组件：

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

{{ someValue }}

以下是更新的Sample StackBlitz供您参考。

拖动时角向母体滑块数据绑定

2 个答案: