изменить статус меню на активный в angular 8

Question

Я новичок в angular Я пытаюсь изменить состояние моей кнопки в навигационной панели, учитывая маршрут навигации, однако, нажимая мою кнопку, я выбираю все остальные кнопки, включая нажатую кнопку.

Здесь у меня есть метод, который я вызываю на кнопке:

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

и это меню моих кнопок:

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

Я пытался изменить свой метод, но он по-прежнему помечает все кнопки при нажатии, что неверно, поскольку должна выделяться только выбранная кнопка.

Answer 1

Ваша ошибка использует одну и ту же переменную (статус) для всех кнопок. И конечно же, ngClass будет вести себя одинаково для всех. Если вы хотите использовать ngClass, вы должны использовать отдельные переменные для каждого элемента управления или для этой функции используйте свойство routerLinkActive = "active".

Answer 2

Вы можете посмотреть RouterLinkActive в Angular, который выполнит эту работу.

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

И вам даже не понадобится вызов selectOnMenu ()

Answer 3

Вы слишком много делаете, как новая пчела.

используйте routerLinkActive , как только этот маршрут станет активным, активный класс будет автоматически выбран, исследуйте ссылку

например:

<a class=" btn btn-square" 
 routerLinkActive="active"  
 routerLink="/documents/index/my">MIS DOCUMENTOS</a>