在点击angular2上的<li>元素上应用特定的类

Question

我有一个如下组件，

<li >
    <a (click)="status='today'" class="search-dropdown-tabs-active">Today</a>
</li>
<li>
    <a (click)="status='tomorrow'">Tomorrow</a>
</li>
<li>
    <a (click)="status='weekend'">This weekend</a>
</li>
<li>
    <a (click)="status='thisweek'" >This week</a>
</li>
<li>
    <a (click)="status='nextweek'" >Next week</a>
</li>
<li>
    <a (click)="status='thismonth'" >This month</a>
</li>

如何在选定的li元素上应用 class="search-dropdown-tabs-active" ？

App.component.ts

import { Component, Output,EventEmitter} from '@angular/core'; 
@Component({
    moduleId:module.id,
    selector: 'calendar',
    templateUrl: './calendar.component.html'
})
export class CalendarComponent{
}

Answer 1

这就是angular2 docs应该如何说的。详细了解docs page。

<li [class.search-dropdown-tabs-active]="status === 'thismonth'">
    <a (click)="status='thismonth'" >This month</a>
</li>

Answer 2

<ul>
    <li [class.search-dropdown-tabs-active]="status==='today'">
        <a (click)="status='today'" 
        >Today</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status==='tomorrow'">
        <a (click)="status='tomorrow'" >Tomorrow</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='weekend'">
        <a (click)="status='weekend'" >This weekend</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='thisweek'">
        <a (click)="status='thisweek'" >This week</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='nextweek'">
        <a (click)="status='nextweek'" >Next week</a>
    </li>
    <li [class.search-dropdown-tabs-active]="status=='thismonth'">
        <a (click)="status='thismonth'">This month</a>
    </li>
  </ul>

工作Link

Answer 3

<li [ngClass]="{'search-dropdown-tabs-active': status === 'today'}">
    <a (click)="status='today'">Today</a>
</li>
<li [ngClass]="{'search-dropdown-tabs-active': status === 'tomorrow'}">
    <a (click)="status='tomorrow'">Tomorrow</a>
</li>

Answer 4

<li [ngClass]="{'search-dropdown-tabs-active': isActivate("today")'}">
    <a (click)="activeTab = 'today'">Today</a>
</li>



isActivate(value : string) : boolean{
   return activeTab === value;
}