对具有特定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");
    });
}

因此，我的问题是：如何仅使用angular2实现与以下jquery代码等价的功能？基本上，使用angular选择一个类并调用该类元素上的函数

$('#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。这意味着您可以根据需要调用该组件上的任何方法

此外，还可以传入一个NouiFormatter类型的格式化程序，该格式化程序实现以下方法：tovalue:number:string；fromvalue:string:number

---

因此，您可以创建自定义格式化程序，并通过[format]=myCustomFormatter将其传递给组件。您的格式将以500000为单位，并返回“<$500K”等特定值。

nouislider是角度分量吗？如果是，请显示组件。@ChrisG我已经发布了html。nouislider是一个开源项目，其组件可在以下位置找到：