1

我正在尝试将 NoUiSlider（来自 Refreshless.com）包装在 Angular2 组件中（我不确定这本身是否是一个好主意；也愿意就此获得建议）。到目前为止，我已经能够创建一个滑块实例并通过一个函数管理它的事件。该函数虽然在我的组件外部，但无法将此类事件导出为我尝试创建的组件的输出属性。有什么建议吗？提前致谢。这是代码

///<reference path="../typings/nouislider/nouislider.d.ts" />

import {Component, ViewChild, AfterViewInit, Input, Output, EventEmitter} from 'angular2/core';

@Component({
  selector: 'my-slider',
  template: `
    <div #sliderDomElement id="slider"></div>
  `,
})

export class Slider implements AfterViewInit { 
    @ViewChild('sliderDomElement') sliderDomElement;
    noUiSlider: any;
    @Input() start: number[];
    @Input() range: any;  
    @Input() pips: any; 
    @Output() end: EventEmitter<any> = new EventEmitter();

    ngAfterViewInit() {
        noUiSlider.create(this.sliderDomElement.nativeElement, 
          {start: this.start,
           range: this.range,
           pips: this.pips
        });
        this.noUiSlider = this.sliderDomElement.nativeElement.noUiSlider;
        this.noUiSlider.on('end', logSlider);
    }

}


function logSlider(inNoUiSlider: any) {
    // the event is managed by this fuction, but I can not raise the event defined as Output by the component
    console.log(inNoUiSlider);
}

经过更多挖掘（在 Typescript 中），我似乎找到了解决方案，即使用箭头函数表达式。这里是新代码

///<reference path="../typings/nouislider/nouislider.d.ts" />

import {Component, ViewChild, AfterViewInit, Input, Output, EventEmitter} from 'angular2/core';

@Component({
  selector: 'my-slider',
  template: `
    <div #sliderDomElement id="slider"></div>
  `,
})

export class Slider implements AfterViewInit { 
    @ViewChild('sliderDomElement') sliderDomElement;
    noUiSlider: any;
    @Input() start: number[];
    @Input() range: any;  
    @Input() pips: any; 
    @Output() end: EventEmitter<any> = new EventEmitter();

public myLogSlider = (inValues: any[]) => {
    console.log(inValues);
    this.end.next(inValues);
}
    ngAfterViewInit() {
        noUiSlider.create(this.sliderDomElement.nativeElement, 
          {start: this.start,
           range: this.range,
           pips: this.pips
        });
        this.noUiSlider = this.sliderDomElement.nativeElement.noUiSlider;
        this.noUiSlider.on('end', logSlider);
    }

}
4

1 回答 1

2

由于仍然有人可能会偶然发现这个问题：

GitHub 上有一个提供此类的库 https://github.com/tb/ng2-nouislider
您可以在反应式表单或模板表单中使用它。

对于这是否是一个合理的想法的问题：

  • （专业版）它为您和其他人提供了在 Angular2 中使用 NoUiSlider 的更简单、更清洁的方式
  • (pro) 你独立于底层库
  • （相反）由于它是一个包装器（并且包装器通常这样做），因此计算需要稍微多一点的 Cpu 功率，因为​​您将例如围绕一个已经存在的函数包装一个额外的函数或使用一个额外的变量来编写更清晰的代码。但是性能差异会很小，我会说在大多数情况下都没有关系。

所以总而言之，我会说，这样做是一件好事，因为它具有更好的代码可维护性。

于 2017-05-01T12:49:52.260 回答