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