通过不起作用的事件调用的方法更改类变量值或类属性值Angular 2打字稿

Question

I'm new with angular 2, Currently facing a problem that I usually fixed with other languages.

The code below.

import { 
  Component
} from '@angular/core';

import {
  registerEvent
} from '../../utilities';

@Component({
  selector: 'mcs-slider-version2',
  templateUrl: './slider-version2.component.html',
  styleUrls: ['./slider-version2.component.scss']
})

export class SliderVersion2Component {

  private _isDragActivated: boolean;

  public constructor() {}

  public mouseDown(): void {
    console.log('down');
    this._isDragActivated = true;
    registerEvent(this._element, 'mousemove', this._onMouseMove);
    registerEvent(document, 'mouseup', this._mouseUp);
  }

  private _mouseUp(): void {
    this._isDragActivated = false;
    console.log(this._isDragActivate);
    console.log('removed');
  }

  private _onMouseMove(): void {
    if (this._isDragActivated) {
        // Do stuff
    }
    console.log(this._isDragActivated)
  }
}

Basically, my goal is once the mousedown event fired it will register two events on dom the mousemove and mouseup also it will set the property _isDragActivated as true means if the user move the mouse it will go/call to the method _onMouseMove() so basically it will console the value of the property _isDragActivated output true then if the user releases the mouse it will call/trigger the event mouseup on this method I set the property _isDragActivated as false and try to move the mouse again my expected output is false since I set it on mouseup event a while ago triggered however I constantly got an output true regardless how many times I triggered the mouseup event. Do I miss something? or I'am trying to implement the wrong algorithm?

Console output code above

Answer 1

I think when you are registering your mouse up event to the document. 'this' is referring to the DOM and not to your SliderVersion2Component.

I would try binding your this._mouseUp function to your SliderVersion2Component...

registerEvent(document, 'mouseup', this._mouseUp.bind(this));