css - 单击 angular2 在 元素上应用特定类

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 page 的信息.

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