更改事件從帶有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）事件處理程序中設置的。