meaning - angularjs tutorial pdf




डायनामिक रूप से ईवेंट श्रोता जोड़ें (2)

मैं सिर्फ कोणीय 2 के साथ गड़बड़ करना शुरू कर रहा हूं और मुझे आश्चर्य है कि अगर कोई मुझे तत्वों के साथ घटना श्रोताओं को गतिशील रूप से जोड़ने और हटाने का सबसे अच्छा तरीका बता सकता है।

मेरे पास एक घटक है। जब टेम्पलेट में एक निश्चित तत्व पर क्लिक किया जाता है तो मैं उसी टेम्पलेट के दूसरे तत्व के लिए एक श्रोता को mousemove जोड़ना चाहता हूं। मैं तब इस श्रोता को निकालना चाहता हूं जब किसी तीसरे तत्व पर क्लिक किया जाता है।

मैं इस तरह के तत्वों को हथियाने के लिए सादे जावास्क्रिप्ट का उपयोग करके काम कर रहा हूं और फिर मानक addEventListener() कॉल कर रहा हूं, लेकिन मुझे आश्चर्य है कि क्या ऐसा करने का एक और " Angular2.0 " तरीका था जिसे मुझे देखना चाहिए।


रेंडरर को एंगुलर 4.0.0-rc.1 में अपग्रेड किया गया है, नीचे दिए गए अपडेट को पढ़ें

कोणीय 2 तरीका Renderer से listen या listenGlobal का उपयोग करना है

उदाहरण के लिए, यदि आप किसी कंपोनेंट में क्लिक ईवेंट जोड़ना चाहते हैं, तो आपको रेंडरर और एलिमेंट रीफ का उपयोग करना होगा (यह आपको व्यूचाइल्ड का उपयोग करने का विकल्प देता है, या कुछ भी जो मूल को पुनः प्राप्त करता है)

constructor(elementRef: ElementRef, renderer: Renderer) {

    // Listen to click events in the component
    renderer.listen(elementRef.nativeElement, 'click', (event) => {
      // Do something with 'event'
    })
);

आप listenGlobal उपयोग कर सकते हैं जो आपको document , body आदि तक पहुंच प्रदान करेगा।

renderer.listenGlobal('document', 'click', (event) => {
  // Do something with 'event'
});

ध्यान दें कि जब से बीटा.2 listen और listenGlobal हैं, दोनों listen लिए एक फ़ंक्शन वापस करते हैं (बीटा 2 के लिए चैंज से परिवर्तन अनुभाग देखें)। यह बड़े अनुप्रयोगों में मेमोरी लीक से बचने के लिए है ( #6686 देखें)।

इसलिए श्रोता को निकालने के लिए हमने गतिशील रूप से जोड़ा हमें एक चर को listen या listen लिए असाइन करना चाहिए जो फ़ंक्शन को वापस लौटा देगा, और फिर हम इसे निष्पादित करते हैं।

// listenFunc will hold the function returned by "renderer.listen"
listenFunc: Function;

// globalListenFunc will hold the function returned by "renderer.listenGlobal"
globalListenFunc: Function;

constructor(elementRef: ElementRef, renderer: Renderer) {

    // We cache the function "listen" returns
    this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
        // Do something with 'event'
    });

    // We cache the function "listenGlobal" returns
    this.globalListenFunc = renderer.listenGlobal('document', 'click', (event) => {
        // Do something with 'event'
    });
}

ngOnDestroy() {
    // We execute both functions to remove the respectives listeners

    // Removes "listen" listener
    this.listenFunc();

    // Removs "listenGlobal" listener
    this.globalListenFunc();
}

यहाँ एक उदाहरण काम कर रहा है। उदाहरण में listen और listenGlobal का उपयोग शामिल है।

Angular 4.0.0-rc.1 + (Renderer2 4.0 4.0-rc.3 के साथ) RendererV2 का उपयोग करना

  • 25/02/2017 : Renderer को पदावनत कर दिया गया है, अब हमें RendererV2 (नीचे की रेखा देखें) का उपयोग करना चाहिए। commit देखें।

  • 10/03/2017 : RendererV2 का नाम बदलकर RendererV2 कर दिया गया। ब्रेकिंग परिवर्तन देखें।

वैश्विक घटनाओं (दस्तावेज़, निकाय, खिड़की) के लिए listenGlobal का कोई और अधिक listenGlobal कार्य नहीं है। इसमें केवल एक listen कार्य है जो दोनों कार्यक्षमताओं को प्राप्त करता है।

संदर्भ के लिए, मैं DOM रेंडरर कार्यान्वयन के स्रोत कोड को कॉपी और पेस्ट कर रहा हूं क्योंकि यह बदल सकता है (हां, यह कोणीय है!)।

listen(target: 'window'|'document'|'body'|any, event: string, callback: (event: any) => boolean):
      () => void {
    if (typeof target === 'string') {
      return <() => void>this.eventManager.addGlobalEventListener(
          target, event, decoratePreventDefault(callback));
    }
    return <() => void>this.eventManager.addEventListener(
               target, event, decoratePreventDefault(callback)) as() => void;
  }

जैसा कि आप देख सकते हैं, अब यह सत्यापित करता है कि यदि हम एक स्ट्रिंग (दस्तावेज़, निकाय या विंडो) पास कर रहे हैं, तो किस स्थिति में यह एक आंतरिक addGlobalEventListener फ़ंक्शन का उपयोग करेगा। किसी भी अन्य मामले में, जब हम एक तत्व (नेटिवमेंट) पास करते हैं तो यह एक सरल ऐड -वेंटलिस्टनर का उपयोग करेगा

श्रोता को हटाने के लिए यह वैसा ही है जैसा कि Renderer साथ कोणीय 2.x में था। किसी फ़ंक्शन को listen , फिर उस फ़ंक्शन को कॉल करें।

उदाहरण

// Add listeners
let global = this.renderer.listen('document', 'click', (evt) => {
  console.log('Clicking the document', evt);
})

let simple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
  console.log('Clicking the button', evt);
});

// Remove listeners
global();
simple();

plnkr का उपयोग करते हुए कोणीय 4.0.0- plnkr साथ plnkr

plnkr का उपयोग करते हुए कोणीय 4.0.0- plnkr साथ plnkr


मुझे यह बेहद भ्रामक लगता है। @EricMartinez के अनुसार Renderer2 सुनता है () श्रोता को निकालने के लिए फ़ंक्शन देता है:

ƒ () { return element.removeEventListener(eventName, /** @type {?} */ (handler), false); }

अगर मैं एक श्रोता को जोड़ रहा हूँ

this.listenToClick = this.renderer.listen('document', 'click', (evt) => {
      alert('Clicking the document');
    })

मुझे उम्मीद है कि मेरे कार्य को निष्पादित करने का इरादा है, न कि कुल विपरीत जो श्रोता को हटा देता है।

// I´d expect an alert('Clicking the document'); 
this.listenToClick();
// what you actually get is removing the listener, so nothing...

दिए गए परिदृश्य में, यह वास्तव में इसे नाम देने के लिए और अधिक समझ में आता है:

// Add listeners
let unlistenGlobal = this.renderer.listen('document', 'click', (evt) => {
  console.log('Clicking the document', evt);
})

let removeSimple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
  console.log('Clicking the button', evt);
});

इसका एक अच्छा कारण होना चाहिए लेकिन मेरी राय में यह बहुत भ्रामक है और सहज नहीं है।





angular