时间戳

首页 > 解决方案 > 从 Angular 中的 Click 事件处理程序获取源元素

javascript - 从 Angular 中的 Click 事件处理程序获取源元素

问题描述

我还是 Angular 的新手，我正在努力获取 Angular Click Listener 的 DOM 元素。我拥有的是以下组件 HTML：

<div *ngFor="let menuItem of menu; index as itemId" class="menuItem">

    <div class="menuItem__top" (click)="itemClicked($event, !!menuItem.submenu)">
        <!-- Additional divs inside... -->
    </div>

</div>

我想在单击时切换一类“menuItem__top”。我的方法是使用单击事件侦听器，但我无法获取源元素来应用该类。

itemClicked(event, hasSubmenu){
    console.log(this) //is the component
    let target = event.target || event.srcElement || event.currentTarget;
    if(hasSubmenu){
      console.log(target);
    }
}

可以通过获取 $event 的目标来完成，但这样我需要检查目标并使用最接近的（“.menuItem__top”）移动到正确的源元素。Angular中是否有一种简单的方法可以将点击侦听器的源元素传递给点击函数，或者有一种方法可以在点击函数中获取它？

在 vanilla JS 中，它就像在 click 函数中使用“this”一样简单，但在 Angular 中，this 是绑定到组件的。（在这种情况下，如果这是唯一的方法，则可以松开与组件的绑定。）

我想了两个办法：

  1. 分配包含一些字符串和 itemId 的动态引用，传递 itemId 并根据侦听器中的 itemId 检索引用对象。

  2. 使用@HostListener 来监听每次“menuItem__top”点击并每次切换类。

你认为最好的方法是什么？我觉得我在这里错过了一些简单的东西。

标签： javascriptangularevent-handlingmouseclick-eventangular9

解决方案

反过来走。人们已经习惯了 jQuery 和它的工作方式（选择 DOM 中已经存在的元素，然后将它们添加到一个类中）。所以在 Angular 中，他们尝试做同样的事情并抓取被点击的元素，将其应用到一个类中。Angular（以及 React 和其他）以相反的方式工作。他们从数据中构建 DOM。如果要修改元素，请从修改生成它的数据开始。

您单击的这个<div class="menuItem__top">是由 构建的let menuItem。您所要做的就是添加一个属性，例如“isClicked”到menuItem.

<div *ngFor="let menuItem of menu; index as itemId" class="menuItem">

    <div class="menuItem__top"
        [class.isClicked]="menuItem.isClicked"
        (click)="menuItem.isClicked = true">
            <!-- Additional divs inside... -->
    </div>
</div>

推荐阅读