Question

所以我构建了一个单页应用程序。它从api中获取数据，将这些数据分类并根据这些类别构建菜单结构。当用户单击菜单项时，将显示各种类别。

这是菜单代码：

     <div>
        <ul class="nav navbar-nav">
          <li><a href="javascript:void(0);" (click)="showGames('all')">All Games</a></li>
          <li *ngFor="let category of categories"><a href="javascript:void(0);" (click)="showGames(category)">{{category}}</a></li>
        </ul>
      </div>

我的问题是这个。当用户在特定页面上时，我想向LI元素添加活动样式，以便用户知道他当前正在查看哪个选项卡。

通常我会使用路由器这样做，它看起来像这样：

<li><a [routerLinkActive]="['active']" routerLink="/route-name">Route Name</a></li>

在这种情况下，我基本上只有一个页面完成所有工作。在PHP中，我可能会做这样的事情：

<li <?=($current_route == $route) ? 'class="active"' : ''?>

但是当然NG2做的事情有点不同，我不知道该怎么做。

Answer 1

[ngClass]="{'active':isCurrentRoute()}"

在方法isCurrentRoute（）中，您应检查当前路线是否为活动路线

如何使用angular-cli添加条件样式

1 个答案: