如何使用angular-cli添加條件式樣

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（），你應該檢查當前路線是有效路線