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）事件处理程序中设置的。

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

2 个答案: