कोणीय 2 में प्रस्तुत तत्वों के लिए ईवेंट श्रोता को कैसे बाध्य करें?

Question

मैं कोणीय 2 में प्रस्तुत तत्वों में एक ईवेंट श्रोता कैसे बांध सकता हूं? मैं ड्रैगला ड्रैग और ड्रॉप लाइब्रेरी का उपयोग कर रहा हूँ। यह गतिशील HTML बनाता है लेकिन मेरी घटना गतिशील HTML तत्वों के लिए बाध्य नहीं है।

Answer 1

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

constructor(private elementRef:ElementRef) {} 

ngAfterViewInit() { 
    this.elementRef.nativeElement.querySelector('my-element') 
           .addEventListener('click', this.onClick.bind(this)); 
} 

onClick(event) { 
    console.log(event); 
} 

Answer 2

आप की तरह सभी गाया डोम तत्व में एक ही कक्षा होने तो आप घटकों में कोड की निम्न भागों का उपयोग करके एक घटना श्रोता सेट कर सकते हैं तत्वों के लिए 'क्लिक' एक घटना बाध्य करने के लिए चाहते हैं। टीएस फाइल

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

constructor(elementRef: ElementRef, renderer: Renderer) { 
    dragulaService.drop.subscribe((value) => { 
     this.onDrop(value.slice(1)); 
    }); 
} 

public onDrop(args) { 

    let [e, el] = args; 

    this.toggleClassComTitle(e,'checked'); 

} 


public toggleClassComTitle(el: any, name: string) { 

    el.querySelectorAll('.com-item-title-anchor').forEach(function (item) { 

     item.addEventListener('click', function(event) { 
       console.log("item-clicked"); 

     }); 
    }); 

} 

Answer 3

कोणीय 4 में एक तत्व के लिए एक EventListener जोड़ने के लिए, हम Renderer2 सेवा की विधि listen उपयोग कर सकते हैं (Renderer is deprecated, तो Renderer2 का उपयोग करें):

सुनने (लक्ष्य: 'खिड़की '|' दस्तावेज़ '|' शरीर '| कोई हो, घटनानाम: स्ट्रिंग, कॉलबैक: (घटना: किसी भी) => बूलियन | शून्य):() => शून्य

उदाहरण:

export class ListenDemo implements AfterViewInit { 
    @ViewChild('testElement') 
    private testElement: ElementRef; 

    constructor(private renderer: Renderer2) { 
    } 

    ngAfterViewInit() { 
     this.renderer.listen(this.testElement.nativeElement, 'click',() => { 
      this.renderer.setStyle(this.testElement.nativeElement, 'color', 'green'); 
     }); 
    } 
}