在 Angular 中单击 <li> 时如何更改背景颜色？答案

【问题标题】：How to change the background color when I click a <li> in Angular?在 Angular 中单击 <li> 时如何更改背景颜色？
【发布时间】：2020-06-06 00:58:24
【问题描述】：

我有一种侧边栏菜单。像这样：

 Projects: 
       All
       project1
       project2

当我单击一个项目时，我想将其更改为背景颜色。（从黑色到绿色）。

Projects: 
           All
           project1 // This was clicked and I want to be GREEN
           project2

但是，到目前为止，我所做的是在单击一个项目时更改所有项目的颜色。他们都是绿色的知道。我不知道如何为特定项目执行此操作。

<div class="container">
  <h5>Projects: </h5>
  <div class="container-fluid">
    <ul class="nav navbar-nav side-nav">
      <li routerLinkActive="active" class="nav-item">
        <a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" routerLink="/tasks" href="#">All</a>
      </li>
    </ul>
    <ul class="nav navbar-nav side-nav" *ngFor="let project of projects">
      <li routerLinkActive="active" class="nav-item" >
        <a (click)="activeProject()" [ngStyle]="{'background-color':isActiveProject? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
      </li>
    </ul>
  </div>
</div>

在组件中：

isActiveProject: boolean;

activeProject() {
    this.isActiveProject = true;
  }

我想这个活动项目方法适用于所有 li 元素，当它被设置为 true 时保持活动状态。

【问题讨论】：

而不是布尔值，将活动项目存储为字符串，然后您可以检查单个相等性

标签： javascript angular typescript ng-style

【解决方案1】：

您需要存储活动项目的索引并将其与 ngFor 循环中的项目进行比较：

组件：

public activeProjectIndex: number;

public activeProject(index: number): void {
  this.activeProjectIndex = index;
}

HTML：

<ul class="nav navbar-nav side-nav" *ngFor="let project of projects; let i = index">
   <li routerLinkActive="active" class="nav-item" >
     <a (click)="activeProject(i)" [ngStyle]="{'background-color': activeProjectIndex === i ? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
   </li>
</ul>

【讨论】：

【解决方案2】：

我看到你有一个routerLinkActive="active"，这应该在li 元素上设置active 类。然后在你的 CSS 中，你可以这样做：

li.nav-item.active { background: green; }

您可能必须设置[routerLinkActiveOptions]="{exact: true}" 才能获得准确的路由和突出显示。

然后你可以去掉isActiveProject来改变背景颜色和ngStyle。

【讨论】：

【解决方案3】：

请试试这个，这最初会为“全部”设置绿色背景，并在您单击它时更改选项卡的背景

HTML

<div class="container">
<h5>Projects: </h5>
<div class="container-fluid">
<ul class="nav navbar-nav side-nav">
 <li routerLinkActive="active" class="nav-item">
    <a (click)="activeProject = 'all'" [ngStyle]="{'background-color':activeProject == 'all' ? 'green' : 'white' }" routerLink="/tasks" href="#">All</a>
  </li>
</ul>
<ul class="nav navbar-nav side-nav" *ngFor="let project of projects">
  <li routerLinkActive="active" class="nav-item" >
    <a (click)="activeProject = project.projectId" [ngStyle]="{'background-color':activeProject ==  project.projectId? 'green' : 'white' }" [routerLink]="['/tasks/project/', project.projectId]" href="#">{{project.projectName}}</a>
  </li>
</ul>

组件

activeProject='all'

【讨论】：

【解决方案4】：

您可以通过在点击函数中添加“$event”属性来跟踪点击的项目属性（$event.target 或任何您需要的）： <a (click)="activeProject($event)"

您还可以访问routerLinkActive 装饰器，因此您还可以通过其父类挂钩当前菜单项

【讨论】：