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

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 函数之前调用删除边框函数，因此它将删除黑色，并且红色仅应用于所选项目。

这没有按预期工作，我不知道我错在哪里 这是我在堆栈闪电战上的代码

Answer 1

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

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

并调用它而不是像这样clickedInside方法中的this.removeBorder();

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