कोणीय 2: लिंक

Question

पर क्लिक करते समय अभिभावक तत्व की घटना का प्रसार रोकें, मेरे पास ईवेंट बबलिंग का मामला है। उदाहरण:

<td (click)="doSomething()"> 
    <text [innerHtml]="content"> 
     // content of innerHtml is : <a href="http://google.com"></a> 
    </text> 
</td> 

टैग को अन्य घटक से आंतरिक एचटीएमएल के माध्यम से प्रस्तुत किया जाता है। समस्या: जब मैं लिंक पर क्लिक करता हूं, तो तत्व की क्लिक घटना भी निकाल दी जाती है। समस्या को कैसे हल करें (doSomething() के प्रसार को रोकें), यह जानकर कि ईवेंट हैंडलर (या कोई कोणीय 2 कोड) आंतरिक HTML के माध्यम से पारित नहीं किया जा सकता है?

धन्यवाद!

Answer 1

वर्कअराउंड बस text घटक से अधिक (click)="$event.stopPropagation()" रखने हो सकता है, ताकि घटना घटक की मेजबानी से बुलबुले नहीं किया जाएगा। Directive लिखकर वही चीज़ सुधार हो सकती है।

<td (click)="doSomething()"> 
    <text (click)="$event.stopPropagation()" [innerHtml]="content"> 
     // content of innerHtml is : <a href="http://google.com"></a> 
    </text> 
</td> 

Answer 2

आप $ घटना का उपयोग कर सकते के रूप में नीचे वस्तु,

<a (click)="stopPorpagation($event);false"  //<<<----added click event 
    href="http://google.com"> 
</a> 

stopPorpagation(event:any){ 
    event.stopPropagation(); 
    .... 
} 

Answer 3

आप उत्साह से भरा हुआ का लाभ ले सकते। अपने हैंडलर से आप event.target देख सकते हैं कि यह देखने के लिए कि A क्लिक किया गया था, और यदि ऐसा है, तो अपनी कार्रवाई छोड़ दें।

सावधान रहें, हालांकि, event.targetSPAN हो सकता है! आपको यह जांचने की ज़रूरत नहीं है कि घटना का लक्ष्य A टैग है, लेकिन बुलबुले के सरल सिमुलेशन में डीओएम पेड़ भी चलाएं।

तो यहाँ संभव समाधान है:

टेम्पलेट

(click)="doSomething($event)" 

घटक

export class AppComponent { 
    content = '<a href="http://google.com">Link text <span>Nested text</span></a>' 

    doSomething(e) { 
    let target = e.target; 

    while (target !== e.currentTarget) { 
     if (target.tagName == 'A') return; 
     target = target.parentNode; 
    } 

    alert('do something') 
    } 
} 

Plunker Example