Jak uzyskać mouseup poza komponentem w Angular 2

Question

Mam komponent abc (część strony). Ma mouseup zdarzenia.

@Component({ 
    selector: 'abc-component' 
}) 
@View({ 
    <div (mousedown)="mouseDown()" (mouseup)="mouseUp()"></div> 
}) 
export class ScheduleComponent { 
    mouseDown(){ 
     //doSomthing 
    } 
    mouseUp(){} 
} 

Ale wydarzenie mouseUp może tylko wywołać gdy mysz wewnątrz <div>. Jak mogę wyzwolić zdarzenie, nawet poza numerem <div>?

Czy muszę przejść (mouseup)="mouseUp()" do app.ts a następnie użyć czegoś podobnego @Output lub service pozwolić app.ts wiedzieć? Czy jest jakiś inny sposób?

Dzięki

Answer 1

Dodaj globalny cel zdarzeń jak

<div (window:mousedown)="mouseDown()" (window:mouseup)="mouseUp()"></div> 

słuchać wydarzeń na całym świecie. (i document działa również).

Działa to oczywiście także w klasie komponentów

@HostListener('window:mouseup', ['$event']) 
mouseUp(event){} 

Answer 2

Element można uzyskać dostęp zdarzeń przez window i document obiektów. Można więc założyć detektor zdarzeń w konstruktorze komponentu:

constructor() { 
    document.body.addEventListener("mouseup",() => { 
    this.mouseup(); 
    }); 
} 

Answer 3

Wewnątrz elementu jego wolał zrobić następująco:

@HostListener('document:mouseup', ['$event']) 
onMouseUp(event: MouseEvent) { 
    ... 
} 

w ten sposób nie trzeba będzie usunąć zdarzenie na ngDestroy