调用元素具有特定的CSS类angular2相当于jquery
问题描述:
,所以我有两个组件,它们是父组件和子组件。父组件使用以下代码引用子组件,并且也具有此构造函数。调用元素具有特定的CSS类angular2相当于jquery
@ViewChild('nouislider') nouislider: any;
constructor(private util: UtilService, private elementRef: ElementRef) {
}
ngAfterViewInit() {
console.log(this.nouislider.el);
this.nouislider.slider.on('start', function(){
console.log("hello");
});
}
所以我的问题是:我怎样才能做相当于下面的jQuery代码只使用angular2?基本上,使用角来选择一个类,并调用该类的元素的功能?
$('#slider-tooltip').noUiSlider_pips({
mode: 'values',
values: [500000,1000000,3000000,5000000,10000000],
density: 4
});
$('.noUi-value.noUi-value-horizontal.noUi-value-large').each(function(){
var val = $(this).html();
val = recountVal(parseInt(val));
$(this).html(val);
});
function recountVal(val){
switch(val){
case 500000: return '< $500 K'; break;
case 1000000:return '$1 M';break;
case 3000000:return '$3 M';break;
case 5000000:return '$5 M';break;
default :return '$10 M';break;
}
}
这里是nouislider部件
<div class="container">
<div class="row">
<div class="col-md-8">
<nouislider #nouislider [step]="step" [format]="format" [tooltips]="[ true , true ]" [connect]="true" [min]="minValue" [max]="maxValue" [(ngModel)]="someRange" (change)="onSlide()"></nouislider>
<div class="alert alert-danger" *ngIf="ninetyDaysError">Dates must be within 90 days of each other.</div>
</div>
<div class="col-md-4">
<h4><div class="label label-primary">{{days}}</div></h4>
</div>
</div>
答
所以nouislider
变量是NouisliderComponent
类型。这意味着你可以调用你想要的那个组件上的任何方法。 to(value: number): string;
from(value: string): number;
所以,你可以让你通过[format]="myCustomFormatter"
传递给您的组件自定义格式:
此外,还可以在NouiFormatter
类型的格式,它实现以下方法通过。您的格式将需要500000,并返回'< $ 500 K',以此类推。
'nouislider'是角度分量吗?如果是,请显示组件。 – ChrisG
@ChrisG我发布了html。 nouislider是一个开源项目,组件可以在这里找到:https://github.com/tb/ng2-nouislider –