Weird Event-Handler-Verhalten in Angular2?

Question

Ich werde einen ziehbaren vertikalen Balken mit Angular2 erstellen. isDragging sollte auf "true" gesetzt werden, wenn der Benutzer darauf klickt, dann sollte moveHandler aufgerufen werden, wenn sich die Maus bewegt. Alles scheint einfach, aber:

1. Wenn die if-Kond in ngOnInit ist wahr, wird "Ziehen" nie gedruckt.
2. Wenn die if-cond in ngOnInt wenn falsch ist, wird "Ziehen" gedruckt, nachdem die Maus hoch ist.

Plunker Link

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

@Component({ 
    selector: 'my-app', 
    template: ` <div id="handler_vertical" (mousedown)="startDragging()"></div> ` 
}) 
export class AppComponent implements OnInit { 
    isDragging = false; 
    width = 0; 

    startDragging() { 
     console.log("start dragging"); 
     this.isDragging = true; 
    } 

    dragHanlder(event: MouseEvent) { 
     if (this.isDragging) { 
      console.log("dragging"); 
      this.width -= event.movementX; 
      // console.log("movementX:"+ event.movementX); 
     } 
    } 

    stopDragging() { 
     console.log("stop dragging"); 
     this.isDragging = false; 
    } 

    ngOnInit() { 
     window.onmouseup = this.stopDragging; 

     if(false){ 
      window.onmousemove = this.dragHanlder;    
     }else{ 
      window.onmousemove = (event) => { 
       console.log("moving"); 
       this.dragHanlder(event); 
      } 
     } 
    } 
} 

Answer 1

Das Problem ist, dass Sie den Rahmen Ihrer Methode zu verlieren, wenn es (dh das "this" Schlüsselwort) in dieser Zeile Referenzierung:

window.onmousemove = this.dragHanlder; 

Auf diese Weise this wird sich beziehen auf Window:

dragHanlder(event: MouseEvent) { 
    if (this.isDragging) { <== this === Window 

könnten Sie nutzen arrow functionthis zu behalten:

window.onmousemove = (e) => this.dragHanlder(e); 

window.onmouseup = (e) => this.stopDragging(e); 

Hier aktualisiert plunkr http://plnkr.co/edit/2LN5EAx9RCdpI3b0Bpt5?p=preview