如何在角度选择新列表项时删除先前选择的列表项的活动类答案

【问题标题】：How to remove active class of previously selected list item on selecting new one in angular如何在角度选择新列表项时删除先前选择的列表项的活动类
【发布时间】：2019-09-10 14:11:44
【问题描述】：

我想删除我有意设置为活动的列表项的活动类，因此当页面加载时，我希望此列表项使用 routerLinkActive="active" 保持活动状态。当我选择角度列表中的其他项目时，我想禁用这个活动类

我尝试使用 ngClass 但没有按预期工作。不使用 jquery 怎么办？

<ul class="nav"> 
       <li routerLinkActive="active" *ngFor="let menuItem of menuItems" [ngClass]="{'active': selectedItem == menuItem}" (click)="listClick($event, menuItem)">
         <a class="nav-link" [routerLink]="[menuItem.path]">
         <p>{{ menuItem.title }}</p>
        </a>
       </li>
     </ul>

declare interface RouteInfo {
  path: String,
  title: String,
  class: String
}
export const ROUTES: RouteInfo[] = [
  { path: '', title: 'Dashboard', class: '' },
  { path: '/vessel', title: 'Vessel Details', class: '' },
  { path: '/arrival', title: 'Arrival Details', class: ''},
  { path: '/stock', title: 'StockYard', class: ''},
  { path: '/cargo', title: 'Cargo Details', class: '' },
  { path: '/other', title: 'Others', class: ''}

];

menuItems: any[];
  selectedItem= false;

listClick(event, newValue) {
    console.log(newValue);
    this.selectedItem = !this.selectedItem;

  }

当单击其他列表项时，应禁用有意设置的活动类。

【问题讨论】：

标签： css angular

【解决方案1】：

我明白你现在想做什么了。您不需要使用 ngClass 或 click 事件。 Angular 将检查活动路由是否与 routerLink 路径匹配。如果是，则添加 ActiveRouterLink 中指定的类。

在不知道您所看到的情况下很难解决您的问题，但请尝试将 [routerLinkActiveOptions]="{exact: true} 添加到 li 元素。

【讨论】：