Javascript HostListener和event.target

早上好，我遇到了一个奇怪的问题，我试图找到一个解决方案，但没有；/我有3个锚元素，每个元素都有“navi start”类，如下所示

 <a class="navi-start test-class"><i class="fab fa-accessible-icon"></i>x</a>
  <a class="navi-start"><i class="fab fa-accessible-icon"></i>y</a>
  <a class="navi-start"><i class="fab fa-accessible-icon"></i> z</a>

}

log（targetElement）只返回icon元素。

---

有人能告诉我如何解决我的问题吗？

您似乎正在收听整个文档中的点击

@HostListener('document:click' ...

我建议尝试缩小范围，如果可能的话，可以监听“click”，这会将侦听器限制在该指令所在的元素上

您的函数将接收单击事件。每个事件的目标都是被单击的实际元素，因此，如果单击图标，您将获得图标

您可以做的是检查元素是否与您期望的匹配，如果不匹配，则遍历dom以找到匹配的父元素。从而捕获预期目标内部的点击。因此，如果您单击该图标，您仍然可以在锚定标记上找到匹配项。像这样：

CheckClick(event) {
    let targetElement = event.target as Element; //changed to let
    const textElement = targetElement.textContent;
    const query = document.querySelector('.test-class');

    if (!targetElement.matches('.navi-start')) { //if clicked element doesn't have class '.navi-start'
      targetElement = targetElement.closest('.navi-start') as Element; // find parent that has class 'navi-start'
    }
    if (targetElement) { //if targetElement of type 'navi-start' was found
      this.rend.removeClass(query, 'test-class');
      this.rend.addClass(targetElement, 'test-class');
      if (textElement === 'x') {
        this.router.navigate(['main']);
      }
      else if (textElement === 'y') {
        this.router.navigate(['main/parts']);
      }
      else {
        this.router.navigate(['main/motorcycle']);
      }
    }
    else {
      console.log(targetElement);
    }
}

---

总之，我找到了最简单的方法，只使用角度指令，而不使用任何方法

<a class="navi-start" [routerLink]="['/main']"  routerLinkActive="test-class" [routerLinkActiveOptions]="{ exact: true }"><i class="fab fa-accessible-icon" ></I>x</a>
  <a class="navi-start" routerLink="parts"  routerLinkActive="test-class"><i class="fab fa-accessible-icon" ></i>y</a>
  <a class="navi-start" routerLink="motorcycle"  routerLinkActive="test-class"><i class="fab fa-accessible-icon" ></i>z</a>

x
Y
Z

<a class="navi-start" [routerLink]="['/main']"  routerLinkActive="test-class" [routerLinkActiveOptions]="{ exact: true }"><i class="fab fa-accessible-icon" ></I>x</a>
  <a class="navi-start" routerLink="parts"  routerLinkActive="test-class"><i class="fab fa-accessible-icon" ></i>y</a>
  <a class="navi-start" routerLink="motorcycle"  routerLinkActive="test-class"><i class="fab fa-accessible-icon" ></i>z</a>