कोणीय 2 सही घटनाओं पर क्लिक करें?

Question

मैं Angular2 के साथ एक इंटरैक्टिव वेब एप्लिकेशन बना रहा हूं और मैं कोणीय घटक पर सही क्लिक कैप्चर करने का एक तरीका ढूंढ रहा हूं। मुझे ब्राउज़र संदर्भ मेनू को दायाँ क्लिक पर दिखने से रोकने की भी आवश्यकता है ताकि मैं अपना स्वयं का कस्टम संदर्भ मेनू प्रदर्शित कर सकूं।

मुझे पता है कि कोणीय 1 में, आपको राइट क्लिक ईवेंट कैप्चर करने के लिए एक कस्टम निर्देश बनाना था। क्या यह अभी भी कोणीय 2 में मामला है, या यह इसे बनाने का एक आसान तरीका है/है? मैंने पिछले कुछ प्रश्नों के बारे में कुछ देखा है लेकिन वे Angular2 से संबंधित नहीं हैं।

मैं सही क्लिक कैप्चरिंग और ब्राउज़र संदर्भ मेनू को कोणीय 2 में दिखाई देने से कैसे रोक सकता हूं?

Answer 1

कोणीय 2 + में के रूप में, आप की तरह किसी भी घटना पर कब्जा कर सकते हैं: $event वैकल्पिक है, और की वापसी

<div (anyEventName)="whateverEventHandler($event)"> 
</div> 

ध्यान दें कि फ़ंक्शन इवेंट हैंडलर की वापसी है, इसलिए, आप ईवेंट से डिफ़ॉल्ट ब्राउज़र कार्रवाई से बचने के लिए return false; कर सकते हैं।

आपके मामले में ईवेंट का नाम contextmenu है। तो, अपने कोड कुछ इस तरह हो सकता है:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div (contextmenu)="onRightClick($event)"> 
     Right clicked 
     {{nRightClicks}} 
     time(s). 
    </div> 
    `, 
    // Just to make things obvious in browser 
    styles: [` 
    div { 
     background: green; 
     color: white; 
     white-space: pre; 
     height: 200px; 
     width: 200px; 
    } 
    `] 
}) 
export class App { 
    nRightClicks = 0; 

    constructor() { 
    } 

    onRightClick() { 
    this.nRightClicks++; 
    return false; 
    } 
} 

यहाँ एक पूर्ण काम कर उदाहरण है:
http://on.gurustop.net/2E0SD8e

Answer 2

आप कोणीय 2 टेम्पलेट में जावास्क्रिप्ट का उपयोग नहीं कर सकते हैं।

लेकिन आप बस का उपयोग कर सकते तृतीय पक्ष लाइब्रेरी ऐसे angular2-contextmenu.