單擊 a 時如何更改背景顏色<li>在角？

Question

我有一種側邊欄菜單。 像這樣：

 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 時仍然處於活動狀態。

Answer 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>

Answer 2

我看到你有一個routerLinkActive="active" ，這應該在li元素上設置active類。 然后在您的 CSS 中，您可以執行以下操作：

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

您可能需要設置[routerLinkActiveOptions]="{exact: true}"以進行精確路由和突出顯示。

然后你可以擺脫isActiveProject來改變背景顏色和ngStyle 。

Answer 3

您可以通過在點擊函數中添加“$event”屬性來跟蹤點擊的項目屬性（$event.target 或任何您需要的）： <a (click)="activeProject($event)"

您還可以訪問routerLinkActive裝飾器，因此您還可以通過其父類掛鈎當前菜單項

Answer 4

請試試這個，這將最初為“全部”設置綠色背景，並在您單擊它時更改選項卡的背景

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'