Ich habe eine Art Seitenleistenmenü. So was:

 Projects: 
       All
       project1
       project2

Wenn ich auf ein Element klicke, möchte ich die Hintergrundfarbe ändern. (von schwarz nach grün).

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

Bis jetzt habe ich jedoch die Farbe für alle Projekte geändert, als ich auf ein Projekt geklickt habe. Alle von ihnen sind grün bekannt. Ich weiß nicht, wie ich das für einen bestimmten Gegenstand machen soll.

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

In der Komponente:

isActiveProject: boolean;

activeProject() {
    this.isActiveProject = true;
  }

Ich nehme an, dass diese aktive Projektmethode für alle li-Elemente gilt und aktiv bleibt, wenn sie auf true gesetzt wurde.

0
abc 21 Feb. 2020 im 18:02

4 Antworten

Beste Antwort

Ich sehe, dass Sie eine routerLinkActive="active" haben, dies sollte die active Klasse auf das li Element setzen. Dann können Sie in Ihrem CSS Folgendes tun:

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

Möglicherweise müssen Sie [routerLinkActiveOptions]="{exact: true}" für das genaue Routing und Hervorheben festlegen.

Dann können Sie isActiveProject für die Änderung der Hintergrundfarbe und des ngStyle entfernen.

1
AliF50 21 Feb. 2020 im 15:11

Sie müssen den Index des aktiven Projekts speichern und mit dem Element in der ngFor-Schleife vergleichen:

Komponente:

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>
1
proxima-b 21 Feb. 2020 im 15:11

Sie können die Eigenschaften des angeklickten Elements ($ event.target oder was auch immer Sie benötigen) verfolgen, indem Sie die Eigenschaft "$ event" in Ihre Klickfunktion einfügen: <a (click)="activeProject($event)"

Sie haben auch Zugriff auf den routerLinkActive -Dekorator, sodass Sie Ihren aktuellen Menüpunkt auch nach seiner übergeordneten Klasse verknüpfen können

1
n1kkou 25 Feb. 2020 im 07:51

Bitte versuchen Sie dies. Dadurch wird zunächst der grüne Hintergrund für "Alle" festgelegt und der Hintergrund der Registerkarte geändert, wenn Sie darauf klicken

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>

Komponente

activeProject='all'
0
afsal 25 Feb. 2020 im 07:45