将菜单状态更改为活动 angular 8

Question

我是新手 angular 我正在尝试更改导航栏中我的按钮的状态，同时考虑到导航路线，但是当单击我的按钮时我 select 所有其他按钮包括按下的按钮。

这里有我在按钮上调用的方法：

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>

我已经尝试更改我的方法，但当我单击时它仍然标记所有按钮，这是不正确的，因为只有 selected 按钮应该突出显示。

Answer 1

作为一只新蜜蜂，你做的太多了。

使用routerLinkActive，一旦该路线激活，将自动选择激活的class，探索link

例如：

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

Answer 2

您可以查看 Angular 中的 RouterLinkActive，这将完成这项工作。

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

而且您甚至不需要调用 selectOnMenu()

Answer 3

您的错误是对所有按钮使用相同的变量（状态）。当然，ngClass 对所有人的行为都是一样的。如果要使用 ngClass，则必须为每个控件使用单独的变量，或者为此功能使用 routerLinkActive="active" 属性.

将菜单状态更改为活动 angular 8

change menu status to active in angular 8

html

javascript

typescript

ng-class

angular