Question

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

///<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);
    }

}

Answer 1

事实上仍然有人可能会在这个问题上遇到错误：

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

关于这是否合理的问题：

（亲）它让您和其他人更容易，更清洁地使用Angular2中的NoUiSlider
（亲）您独立于承保库
（contra）因为它是一个包装器（并且包装器通常会这样做），所以需要更多的Cpu功率来计算，因为你需要在已有的函数周围包装一个额外的函数或使用额外的变量来编写更干净的代码。但是性能差异会很小，我会说在大多数情况下都没关系。

总而言之，我会说，为了更好的代码可维护性，这样做是件好事。

在angular2组件中包装NoUiSlider - 如何管理事件

1 个答案: