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

我已经在angular 2组件中集成了一个jquery ui滑块插件。它工作得很好，但有一个棘手的问题。滑动时屏幕会闪烁。我注意到，如果我使用常规的HTML5滑块，屏幕不会闪烁，过渡是平滑的，但是这个滑块只支持一个手柄。如何禁用闪烁。我需要关于在哪里寻找问题根源的指导。我已经做了详细的说明，并在其中提出了一些意见

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
    });
}

---

所发生的情况是，无论何时调用

sliderChanged（）

，都会替换对

activitiesArray

的引用。这将导致异步管道取消订阅旧引用并重新订阅新引用。在没有数据的情况下，这会导致一个瞬间的光点。如果您对Http请求执行相同的操作，这将更加明显

我对您的设置进行了分叉和修改，以避免重复设置

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"  />

---

无论何时调用

sliderChanged（）

，都会替换对

activitiesArray

的引用。这将导致异步管道取消订阅旧引用并重新订阅新引用。在没有数据的情况下，这会导致一个瞬间的光点。如果您对Http请求执行相同的操作，这将更加明显

我对您的设置进行了分叉和修改，以避免重复设置

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"  />

使用打底滑块时，您是否也有同样的体验？它还使用jQueryUI滑块。谢谢我没有使用过打底滑块，但后来在发布的答案中发现这是导致我的设计的一个问题。你对打底滑块也有同样的体验吗？它还使用jQueryUI滑块。谢谢我没有使用过打底滑块，但后来在发布的答案中发现这是导致我的设计的一个问题。