HostListener和event.target

Question

早上好，我有一个奇怪的问题，我试图找到一个解决方案，但我没有;/我有一个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>

通过@HostListener，我想“听”一下锚点元素上的点击。我使用event.target作为元素，它几乎可以完美地工作。当我单击图标元素时，问题开始出现。event.target返回me！文档。

  @HostListener('document:click', ['$event'])


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

if (targetElement.classList.contains('navi-start')) {

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

}

而console.log(targetElement)只返回图标元素。有人能告诉我如何解决我的问题吗？

Answer 1

看起来您正在监听整个文档中的点击

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

Answer 2

无论如何，我发现最简单的方法就是不带任何方法地使用Angular指令。

<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>