Событие изменения, вызванное слишком быстро с мат-слайдера с Angular 7

Question

Проблема возникла после обновления до угловой 7. Если вы нажмете на ползунок, не отпуская щелчок (mouseup), он все равно сработает и выдаст событие change.Как я могу игнорировать это событие?Когда-нибудь люди начнут перетаскивать несколько пикселей рядом с реальным центром этикетки, и я хочу предотвратить событие изменения в этот момент.

 <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

В качестве обходного пути вы можете использовать глобальное событие мыши вверх.

В контроллере это будет выглядеть примерно так:

@ViewChild(MatSlider) slider: MatSlider;

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

Вам, конечно, нужно импортировать MatSlider:

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

В методе mouseUp () вы можете добавить проверку, действительно ли пользователь начал перетаскивать ползунок, наблюдая флаг, который установлен в обработчике событий (mousedown) в элементе управления mat-slider.

Answer 2

Надеюсь, вы нашли решение для этого.В моем случае я забыл импортировать BrowserAnimationsModule

После его импорта мат-слайдер работал, как и следовало ожидать.