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