通过事件调用的方法更改 class 变量值或 class 属性 值无效 Angular 2 打字稿

Question

我是 angular 2 的新手，目前遇到一个我通常用其他语言解决的问题。

下面的代码。

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

基本上，我的目标是一旦 mousedown 事件触发，它将在 dom mousemove 和 mouseup 上注册两个事件，它还会设置 属性 _isDragActivated 因为 true 意味着如果用户移动鼠标它将 go/call 到方法 _onMouseMove() 所以基本上它会控制 属性 _isDragActivated 输出 true 然后如果用户释放鼠标它将 call/trigger 事件 mouseup 在此方法上我将 属性 _isDragActivated 设置为 false 并尝试再次移动鼠标 我的预期输出是 false 因为我将它设置为 mouseup 事件触发了一段时间但是我不断得到输出 true 不管我多少次触发了 mouseup 事件。我想念什么吗？或者我正在尝试实施错误的算法？

上面的控制台输出代码

Answer 1

我想当您将鼠标松开事件注册到文档时。 'this' 指的是 DOM 而不是您的 SliderVersion2Component。

我会尝试将您的 this._mouseUp 函数绑定到您的 SliderVersion2Component...

registerEvent(文档, 'mouseup', this._mouseUp.bind(this));