Ich bin neu im Winkel Ich versuche, den Status meiner Schaltfläche in der Navigationsleiste unter Berücksichtigung der Navigationsroute zu ändern. Wenn ich jedoch auf meine Schaltfläche klicke, wähle ich alle anderen Schaltflächen aus, einschließlich der gedrückten Schaltfläche.

Hier habe ich meine Methode, die ich auf den Button rufe:

private status = false;
selectOnMenu(event) {
    const urlBase = this.location.path();
    if (urlBase === '/documents/index/my') {
        this.status = !this.status;
    } else if (urlBase === '/documents/index/sending') {
      this.status = !this.status;
    } else if (urlBase === '/documents/index/receiving') {
      this.status = !this.status;
    } else if (urlBase === '/documents/index/received') {
      this.status = !this.status;
    } else if (urlBase === '/documents/index/finished') {
      this.status = !this.status;
    } else {
      this.status = status;
    }
  }

Und das ist das Menü meiner Schaltflächen:

<div class="btn-group" role="group" aria-label="...">
            <a class=" btn btn-square" (click)="selectOnMenu($event)" [ngClass]="status ? 'active' : ''"  routerLink="/documents/index/my">MIS DOCUMENTOS</a>
            <a  class=" btn btn-square" (click)="selectOnMenu($event)" [ngClass]="status ? 'active' : ''" routerLink="/documents/index/sending">PENDIENTES POR DESPACHAR</a>
            <a class=" btn btn-square" (click)="selectOnMenu($event)" [ngClass]="status ? 'active' : ''" routerLink="/documents/index/receiving">PENDIENTES POR RECEPCIONAR</a>
            <a class=" btn btn-square" (click)="selectOnMenu($event)" [ngClass]="status ? 'active' : ''" routerLink="/documents/index/received">RECEPCIONADOS</a>
            <a class=" btn btn-square" (click)="selectOnMenu($event)" [ngClass]="status ? 'active' : ''" routerLink="/documents/index/finished">FINALIZADOS</a>
          </div>

Ich habe versucht, meine Methode zu ändern, aber beim Klicken werden immer noch alle Schaltflächen markiert, was falsch ist, da nur die ausgewählte Schaltfläche hervorgehoben werden sollte.

enter image description here

0
Erick91 7 Feb. 2020 im 18:12

3 Antworten

Beste Antwort

Ihr Fehler verwendet für alle Schaltflächen dieselbe Variable (Status). Und natürlich wird sich ngClass für alle gleich verhalten. Wenn Sie ngClass verwenden möchten, müssen Sie für jedes Steuerelement separate Variablen verwenden oder für diese Funktion die Eigenschaft routerLinkActive = "active" verwenden.

2
AbdurrahmanY 7 Feb. 2020 im 15:26

Sie können RouterLinkActive in Angular anzeigen, das die Aufgabe übernimmt.

<a routerLink="/documents/index/sending" routerLinkActive="active">Bob</a>

Und Sie brauchen nicht einmal den Aufruf von selectOnMenu ()

0
Yin 7 Feb. 2020 im 15:20

Du machst zu viel als neue Biene.

Verwenden Sie routerLinkActive. Sobald diese Route aktiv ist, wird die aktive Klasse automatisch ausgewählt. Überprüfen Sie den Link

Beispielsweise:

<a class=" btn btn-square" 
 routerLinkActive="active"  
 routerLink="/documents/index/my">MIS DOCUMENTOS</a>
0
Ali Adravi 7 Feb. 2020 im 15:20