Question

我有一条指令，应使列表元素在单击时变为红色。它正在按预期工作，但也应该单击其他li时变为黑色，因此只有选定的li应该为红色

这是我的实现方式，

@HostListener('click', ['$event']) clickedInside(event) {
      event.preventDefault();
      event.stopPropagation();
      this.removeBorder();
      this.setElementStyleToBold();
      if (this.el.nativeElement.contains(event.target)) {
        this.clicked = event.target.id;
      }
}

这是另一个主持人侦听器，它监视外部单击并在单击文档时将颜色更改为黑色，

@HostListener('document:click', ['$event']) clickedOutside(event){
      event.preventDefault();
      event.stopPropagation();
      this.removeBorder();
}

在clickedInside函数中，我在调用setElementStyleToBold函数之前先调用remove border函数，这样它将删除黑色，而红色仅应用于所选项目。

这无法正常工作，我不知道哪里错了这是我在code上的闪电战

Answer 1

您可以使用以下代码创建新方法

private removeColor() {
      document.querySelectorAll('[appSelectedItem]').forEach((el) => {
        this.removeBorder(el);
      })
    }

并像这样在this.removeBorder();方法中调用clickedInside

@HostListener('click', ['$event']) clickedInside(event) {
      event.preventDefault();
      event.stopPropagation();
      this.removeColor();
      this.setElementStyleToBold();
      if (this.el.nativeElement.contains(event.target)) {
        this.clicked = event.target.id;
      }
}

选定的列表元素的颜色更改与角度指令

1 个答案: