更改事件从带有Angular 7的垫滑块触发得太快

Question

升级到角度7后出现问题。如果在不释放喀嗒声的情况下单击滑块（鼠标），它仍然会触发并发出更改事件。 如何忽略该事件？ 有时人们会开始在标签的真实中心旁边拖动几个像素，而我想防止此时发生更改事件。

 <mat-slider
    class="example-margin"
    [disabled]="disabled"
    [invert]="invert"
    [max]="max"
    [min]="min"
    [step]="step"
    (change)="change($event)"
    [thumbLabel]="thumbLabel"
    [tickInterval]="tickInterval"
    [(ngModel)]="value"
    [vertical]="vertical">
</mat-slider>

public change($event) {
    alert('trace');
    console.log($event);
    // need a way to ignore the first trigger if the slider is still being dragged
  }

Answer 1

希望您找到了解决方案。 就我而言，我忘了导入BrowserAnimationsModule

导入后，垫式滑块正在按预期工作。

Answer 2

解决方法是使用全局鼠标向上事件。

在控制器中，它看起来像这样：

@ViewChild(MatSlider) slider: MatSlider;

@HostListener('window:mouseup', ['$event'])
mouseUp(event) {
  console.log(this.slider.value);
}

当然，您需要导入MatSlider：

import { MatSlider } from '@angular/material';

在mouseUp（）方法中，您可以通过观察标记来检查用户是否真正开始拖动滑块，该标记是在mat-slider控件的（mousedown）事件处理程序中设置的。