从 Angular 中的单击事件处理程序获取源元素

Question

我还是 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>

我想在点击时切换 class 或 "menuItem__top"。我的方法是使用点击事件侦听器，但我无法获取源元素以应用 class。

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

可以通过获取 $event 的目标来完成，但这样我需要检查目标并使用 closest(".menuItem__top") 移动到正确的源元素。 Angular 中是否有简单的方法将点击侦听器的源元素传递给点击函数或将其放入点击函数中的方法？

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

我想了两个办法：

分配一个包含一些字符串和 itemId 的动态引用，传递 itemId 并根据侦听器中的 itemId 检索引用对象。
使用@HostListener 监听每次 "menuItem__top" 点击并每次切换 class。

您认为最好的方法是什么？我觉得我在这里缺少一些简单的东西。

Answer 1

反过来。人们习惯于 jQuery 及其工作方式（选择 DOM 中已经存在的元素，然后将它们添加到 class）。所以在 Angular 中，他们尝试做同样的事情并抓住被点击的元素，将其应用 class。 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>

从 Angular 中的单击事件处理程序获取源元素

Getting The Source Element From Click Event Handler In Angular

javascript

event-handling

mouseclick-event

angular

angular9