PrimeNG 滑块 - 单击事件

Question

我正在尝试 primeng 的滑块组件，令我惊讶的是，我发现它们没有任何滑块的

onClick

事件，尽管如此，我看到它们为滑块暴露了

onChange

和

onSlideEnd

事件。

我想在值改变时执行

http request

，所以我这样做了

<p-slider
       (onChange)="doHttp($event.value)"
       [(ngModel)]="sliderValue"
       [min]="0" [max]="100" [step]="1">
</p-slider>

当我滑动滑块时会导致开销，因为触发了多个http请求，我尝试用

更改它

<p-slider
           (onSlideEnd)="doHttp($event.value)"
           [(ngModel)]="sliderValue"
           [min]="0" [max]="100" [step]="1">
</p-slider>

但是现在单击滑块时不会触发http请求

我怎样才能实现我想要的行为？在发出 http 请求之前，我是否应该通过主题在

onChange

事件中添加任何类型的延迟？我觉得很奇怪，他们没有关于滑块的

onClick

事件，所以我在这里错过了什么吗？

提前致谢

Answer 1

可以使用rxjs

debounceTime

减少调用次数！

import { Component } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'slider-basic-demo',
  templateUrl: './slider-basic-demo.html',
})
export class SliderBasicDemo {
  private subscription = new Subscription();
  value!: number;
  private sliderSubject: Subject<void> = new Subject();

  ngOnInit() {
    this.subscription.add(
      this.sliderSubject.pipe(debounceTime(500)).subscribe(() => {
        // do API call here!
        alert(this.value);
      })
    );
  }

  doHttp(value: any) {
    this.sliderSubject.next();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

堆栈闪电战