टाइपस्क्रिप्ट

Question

में गतिशील रूप से जोड़े गए एचटीएमएल तत्व को क्लिक ईवेंट जोड़ने के लिए कैसे मैं कोणीय 2 में एक ऐप बना रहा हूं। मैं गतिशील रूप से जोड़े गए HTML तत्व पर एक क्लिक ईवेंट जोड़ना चाहता हूं। मैं एक स्ट्रिंग (contentString) परिभाषित करता हूं, और इस स्ट्रिंग में मैं HTML तत्व को परिभाषित करता हूं।

var contentString = '<b>' + this.mName + '</b><br/> ' + this.mObject.category + '<br/> Click here for more information <button (click)="navigate()">Navigate here</button>'; 

इस स्ट्रिंग एक एचटीएमएल तत्व के अंदर इस तरह रखा जाता है:

var boxText = document.createElement("div"); 
    boxText.innerHTML = contentString; 

हालांकि जब मैं तत्व का निरीक्षण किया, यह परिभाषित क्लिक करें घटना है, लेकिन यह ट्रिगर नहीं करता।

पर क्लिक करें यह लोग इन

navigate() { 
console.log("eeeehnnananaa"); 
} 

सांत्वना चाहिए लेकिन वह काम नहीं करता। कोई भी समाधान?

Answer 1

घटक संकलित होने पर कोणीय टेम्पलेट को संसाधित करता है। बाद में जोड़ा गया HTML अब संकलित नहीं किया गया है और बाइंडिंग को अनदेखा किया जाता है।

आप उपयोग कर सकते हैं

constructor(private elRef:ElementRef) {} 

ngAfterViewInit() { 
    // assume dynamic HTML was added before 
    this.elRef.nativeElement.querySelector('button').addEventListener('click', this.onClick.bind(this)); 
}