Angular/Typescript - 单击 link 时更改跨度的背景颜色

Question

我试图在单击 link 时更改跨度的颜色，以表明它已被选中。这必须以单选按钮的形式工作，这意味着如果单击（选中）另一个 link，颜色必须消失。我只使用 html 和 css 尝试了各种方法，但不幸的是我从来没有设法使用 :focus 让它工作。目前，当我点击其中一个过滤器时，没有迹象表明其中一个类别已被激活，这严重影响了用户体验。我相信这可以在 angular 中使用 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>

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

Answer 1

你可以使用 ngClass Demo

在 css 中创建你的 class 并写下你想要的 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}

with function 首先初始化它然后改变点击一个

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

Angular/Typescript - 单击 link 时更改跨度的背景颜色

Angular/Typescript - Change background color of a span when a link is clicked

html

css

focus

typescript

angular