在 Angular 2 组件中使用 Jquery ui 滑块时闪烁答案

【问题标题】：Flicker when using Jquery ui slider in an Angular 2 component在 Angular 2 组件中使用 Jquery ui 滑块时闪烁
【发布时间】：2016-06-24 14:31:39
【问题描述】：

我在 Angular 2 组件中集成了一个 jquery-ui 滑块插件。它工作得很好，但有一个烦人的问题。滑动时屏幕闪烁。我注意到，如果我使用普通的 HTML5 滑块，屏幕不会闪烁，过渡很流畅，但这个滑块只支持一个手柄。如何禁用闪烁。我需要有关在哪里寻找问题根源的指导。我做了详细的plunk here，里面放了一些cmets。

export class RangeSlider implements OnInit {

@Input() value: any;
@Output() sliderChanged= new EventEmitter();

elementRef: ElementRef;
constructor(elementRef: ElementRef) {
    this.elementRef = elementRef;
}
ngOnInit() {
    let that = this;
    let gradeLabels = ["K", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11","12"];
    jQuery(this.elementRef.nativeElement).find('.rangeSlider').slider({
        range: true,
       min: 0,
       max: gradeLabels.length-1,
        values: [0, 12],
        slide: function (event, ui) {
          let min = ui.values[0]
         let max = ui.values[1];
          min = (min == 0) ? "K" : min;
          let grade = (min == max) ? min : min + '-' + max;
          that.sliderChanged.emit(grade);
       }
    }).slider("pips", {
       rest: "label",
       labels:gradeLabels
    });
}

【问题讨论】：

您对 PrimeNG 滑块有同样的体验吗？它还使用 jQuery UI 滑块。 primefaces.org/primeng/#/slider
谢谢。我没有使用 PrimeNG 滑块，但后来在发布的答案中发现这是我设计的问题。

标签： css html jquery-ui typescript angular

【解决方案1】：

发生的情况是，每当您调用 sliderChanged() 时，您都会替换对 activitiesArray 的引用。这导致异步管道取消订阅旧引用并重新订阅您的新引用。这会导致没有数据的瞬间。如果你对 Http 请求做同样的事情，它会更明显。

我已经对您的plunk 进行了分叉和重新设计，以免重复设置activitiesArray 并且更具“反应性”。请注意，最好观察 jquery 滑块的输出，而不是调用推送主题的事件回调。

更改为src/app.component.ts

htmlSlider=new Control();
jqSlider$=new Subject();
constructor(private _activityService: ActivityService) {
    let searchTerm$=this.term.valueChanges
      .debounceTime(400)
      .distinctUntilChanged()
      .startWith('');
    let activityList$=this._activityService.getActivityList();
    let searchedActivities$=activityList$.combineLatest(searchTerm$,this.searchFilter);
    let jqSliderFiltered$=searchedActivities$.combineLatest(this.jqSlider$.startWith(undefined),this.sliderSearch);
    let htmlSlider$=this.htmlSlider.valueChanges.startWith(undefined);
    let htmlSliderFiltered$=jqSliderFiltered$.combineLatest(htmlSlider$,this.gradePipe);
    this.activitiesArray=htmlSliderFiltered$;
}

searchFilter(activityList:Activity[],term: string):Activity[] {
    return activityList.filter(item=> item.description.toLowerCase().includes(term.toLowerCase())));
}

sliderSearch(activityList:Activity[],term: string):Activity[]{
  if(!term)
    return activityList;
  return activityList.filter(item=> item.grade==term));
}

gradePipe(activityList,minGrade){
  if(!minGrade)
    return activityList;
  return activityList.filter(activity => parseInt(activity.grade.split("-")[0]) >= +minGrade);
}

sliderChanged(grade:any) {
 this.jqSlider$.next(grade);
}

更改为activitymain.html

<input type="range" min="0" max="12" [ngFormControl]="htmlSlider"  />

【讨论】：