在具有特定 css class 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 到 select a class 并在具有 class?

的元素上调用函数

$('#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 '< 0 K'; break;
        case 1000000:return ' M';break;
        case 3000000:return ' M';break;
        case 5000000:return ' M';break;
        default :return ' 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: string): number;

因此您可以创建一个自定义格式化程序，通过 [format]="myCustomFormatter" 传递给您的组件。您的格式将采用 500000 和 return '< $500 K' 等等作为您的特定值。

在具有特定 css class angular2 等效于 jquery 的元素上调用函数

Call a function on elements with specific css class angular2 equivalent of jquery

css

each

jquery

selector

angular