角度/打字稿 - 单击链接时更改范围的背景颜色

Question

我正在尝试在单击链接时更改范围的颜色，以指示它已被选中。这必须以单选按钮的形式工作，这意味着如果单击(选中(另一个链接，颜色必须消失。我只使用 html 和 css 尝试了各种方法，但不幸的是，我从未设法让它使用 ：focus 工作。目前，当我单击其中一个过滤器时，没有迹象表明其中一个类别已被激活，严重影响了用户体验。我相信这可以在角度中使用 ngClass 来实现，但是，我真的很难理解它是如何工作的。任何帮助将不胜感激。

.HTML：

<div class="checklist categories">
<ul>
<li><a data-action="filter-link" (click)="changeCategory(null)"><span></span>All</a></li>
<li><a data-action="filter-link" (click)="changeCategory('House Favourites')"><span></span>House Favourites</a></li>
</ul>
</div>   

跨度的样式形成一个小复选框。

Answer 1

您可以使用ngClass Demo

在 CSS 中创建您的类并编写您想要的 CSS

.active-link span{background-color:green;}

在 html 中为每个列表项创建 ngClass

<ul>
<li><a data-action="filter-link" [ngClass]="{'active-link' : menus.allMenu}"  (click)="changeCategory(null,'allMenu')"><span></span>All</a></li>
<li><a data-action="filter-link" [ngClass]="{'active-link' : menus.houseMenu}" (click)="changeCategory('House Favourites','houseMenu')"><span></span>House Favourites</a></li>
</ul>

然后在 TS 中为菜单创建模型

menus={allMenu:false,houseMenu:false}

使用函数首先初始化它，然后更改单击一个

changeCategory(el,event){
this.menus.allMenu=false;
this.menus.houseMenu=false;
this.menus[event]=!this.menus[event];
}