具有多个子节点的Angular $事件返回不同的目标

Question

我的应用程序中有这个html元素：

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 );
}

当我点击元素时，根据我点击的位置，我在函数event.target内获得onOpen()的不同结果。

例如，如果我单击有p文本的元素，则目标将是p元素而不是a元素。

有没有办法让它始终是具有点击功能的元素？

Answer 1

使用event.currentTarget获取侦听器绑定的元素

Answer 2

您正在寻找

event.currentTarget

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

Answer 3

Angular会返回真正的目标，因为您实际点击的是p而不是a。p包含a，宽度可达百分之百。

解决问题的一种方法是，使用$event.currentTarget来获得目标。

Answer 4

您可以在（点击）中传递一个字符串或对象，然后尝试操作DOM

例如：

<。>在.html onOpen($event, 'profile')或onOpen($event, menu.profile)

中 <。>文件中的

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

您是否尝试在菜单项中添加活动类，或者您想要实现的目标是什么？

编辑：

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