0

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

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

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>

我试图改变我的方法，但是当我点击时它仍然标记所有按钮，这是不正确的，因为只有选定的按钮应该被突出显示。

在此处输入图像描述

4

3 回答 3

1

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

于 2020-02-07T15:26:02.470 回答
0

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

使用routerLinkActive，一旦该路由处于活动状态，将自动选择活动类，探索链接

例如：

<a class=" btn btn-square" 
 routerLinkActive="active"  
 routerLink="/documents/index/my">MIS DOCUMENTOS</a>
于 2020-02-07T15:20:18.853 回答
0

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

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

你甚至不需要调用selectOnMenu()

于 2020-02-07T15:20:45.093 回答