Мерцание при использовании слайдера JQuery ui в компоненте Angular 2

У меня встроен плагин слайдера jquery-ui в угловом 2 компоненте. Он отлично работает, но с одной ворчащей проблемой. Экран мерцает при слайде. Я заметил, что если я использую обычный слайдер HTML5, экран не мерцает, переход плавный, но этот слайдер поддерживает только один дескриптор. Как отключить мерцание. Мне нужно руководствоваться тем, где искать источник проблемы. Я сделал подробный plunk here и поместил в него несколько комментариев.Мерцание при использовании слайдера JQuery ui в компоненте Angular 2

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

Мерцание при использовании слайдера JQuery ui в компоненте Angular 2

ответ

Смежные вопросы