javascript - 选定的列表元素的颜色更改与 Angular Directive(指令)

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

这是我的实现，

@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函数，因此它将删除黑色，而红色仅应用于所选项目。

这无法正常工作，我不知道哪里出了问题
这是我在stackblitz上的code

最佳答案

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

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