Angular $ Ereignis mit mehreren Kindern zurückkehrt unterschiedliches Ziel

Question

Ich habe dieses HTML-Element auf meiner Anwendung:

.html

<a (click)="onOpen($event)"> 
    <i class="fa fa-file-text-o"></i> 
    <p>Profile</p> 
</a> 

.ts

onOpen(event):void { 
    console.log(event.target); 
} 

Wenn ich auf auf dem Element bekomme ich unterschiedliche Ergebnisse für event.target innerhalb der Funktion onOpen() dep Auf die Position klicken, auf die ich klicke.

Zum Beispiel, wenn ich auf das Element, wo gibt es den p Text, klicken, wird das Ziel das Element anstelle des Elements a sein.

Gibt es eine Möglichkeit, dass es immer das Element ist, das die Klickfunktion hat?

Answer 1

Verwenden event.currentTarget das Element erhalten die Zuhörer

Answer 2

event.currentTarget gebunden ist ist das, was Sie suchen

onOpen(event:Event):void { 
    console.log(event.currentTarget); 
} 

Answer 3

Angular Rückkehr das wahre Ziel, weil Sie tatsächlich die p klicken nicht a .Die enthält a mit hundert Prozent Breite zu decken.

Eine Möglichkeit, es zu lösen, verwenden Sie $event.currentTarget, um Ursprungsziel zu erhalten.

Answer 4

Sie könnten einen String oder ein Objekt in dem (Klick) passieren und spielen, um mit, dass stattdessen versuchen, den DOM

Zum Beispiel zu manipulieren:

im .html onOpen($event, 'profile') oder onOpen($event, menu.profile)

in die .ts Datei

public menu: = { profile: {name: 'Profile', url: '....', icon: 'sample.svg', isActive: true }, home: {...} }

versuchen Sie, ein hinzufügen aktive Klasse im Menüpunkt oder was genau willst du erreichen?

EDIT:

<a (click)="onOpen($event, menu.profile)" [class.active]="menu.profile.isActive === true"> <i class="fa fa-file-text-o"></i> <p>Profile</p> </a>