将菜单状态更改为在 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 ，一旦该路由处于活动状态，将自动选择活动类，探索链接

例如：

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

Answer 3

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

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

你甚至不需要调用selectOnMenu()