调用元素具有特定的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>

来源

2017-07-06 Kevin Cai

'nouislider'是角度分量吗？如果是，请显示组件。 – ChrisG

@ChrisG我发布了html。 nouislider是一个开源项目，组件可以在这里找到：https：//github.com/tb/ng2-nouislider –

所以nouislider变量是NouisliderComponent类型。这意味着你可以调用你想要的那个组件上的任何方法。 to(value: number): string;from(value: string): number;

所以，你可以让你通过[format]="myCustomFormatter"传递给您的组件自定义格式：

此外，还可以在NouiFormatter类型的格式，它实现以下方法通过。您的格式将需要500000，并返回'< $ 500 K'，以此类推。

来源

2017-07-06 15:41:16 ChrisG

调用元素具有特定的CSS类angular2相当于jquery

回答

相关问题