在Angular 2組件中使用Jquery UI滑塊時閃爍

我在角度2組件中集成了一個jquery-ui滑塊插件。它工作很好，但有一個嘮叨的問題。滑動時屏幕閃爍。我注意到如果我使用普通的HTML5滑塊，屏幕不閃爍，過渡很平滑，但是這個滑塊只支持一個句柄。我怎樣才能禁用閃爍。我需要指導在哪裏尋找問題的根源。我已經制作了詳細的plunk here並在其中提出了一些評論。在Angular 2組件中使用Jquery UI滑塊時閃爍

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

來源

2016-03-09 Abide Masaraure

你遇到PrimeNG滑塊一樣嗎？它也使用jQuery UI滑塊。 http://www.primefaces.org/primeng/#/slider –

謝謝。我沒有使用PrimeNG滑塊，但後來在發佈的答案中發現這是導致我設計的一個問題。 –

發生了什麼事是要替換的參考activitiesArray每當調用sliderChanged()。這會導致異步管道取消訂閱舊引用並重新訂閱新引用。這會在沒有數據的情況下導致短暫的閃爍。如果你要對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" />

來源

2016-03-10 14:51:34

在Angular 2組件中使用Jquery UI滑塊時閃爍

回答

相關問題