कोणीय 2

Question

में घटक के बाहर माउसअप कैसे प्राप्त करें मेरे पास abc घटक (पृष्ठ का हिस्सा) है। इसमें एक घटना माउसअप है।

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

लेकिन mouseup घटना केवल ट्रिगर कर सकते हैं जब <div> के अंदर माउस। मैं <div> के बाहर भी ईवेंट को कैसे ट्रिगर कर सकता हूं?

मैं (mouseup)="mouseUp()"को app.ts ले जाने और उसके बाद @Output या service की तरह कुछ का उपयोग करने देने app.ts पता करने के लिए है? क्या कोई और तरीका है?

धन्यवाद

Answer 1

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

की तरह एक वैश्विक घटना लक्ष्य जोड़ें विश्व स्तर पर घटनाओं को सुनने के लिए। (body और document भी काम करते हैं)।

इस घटक वर्ग

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

Answer 2

एक घटक window और document वस्तुओं के माध्यम से घटनाओं पहुँच सकते हैं। तो तुम घटक के निर्माता में एक घटना श्रोता सेट कर सकते हैं:

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

Answer 3

में भी निश्चित रूप से काम करता है घटक के अंदर इसकी पालन करने के लिए पसंद किया:

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

इस तरह से आप पर घटना को दूर करने की जरूरत नहीं होगी ngDestroy