jquery - 在具有特定 css 类 angular2 等同于 jquery 的元素上调用函数

Question

所以我有两个组件，一个是父组件，一个是子组件。父组件使用下面的代码引用子组件，也有这个构造函数。

@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>

Answer 1

所以 nouislider 变量的类型是 NouisliderComponent。这意味着您可以根据需要调用该组件上的任何方法。

此外，您可以传入一个NouiFormatter 类型的格式化程序，它实现了以下方法:to(value: number): string; from(value:字符串): 数字;

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