如何使用Angular2切換選項卡並單擊更改CSS類？

Question

單擊一個選項卡后，我想使該類tab-active ，並從另一個tab-active中將其刪除，反之亦然。 我要在其上實現的HTML代碼是：-

<div class="tab-change-login">
    <ul class="un-styled tab-ul">
        <li class="tab-active" data-login="signin-area">SIGN IN</li>
        <li data-login="signup-area">SIGN UP</li>
    </ul>
</div>

我如何編寫onClick函數以使用angular2在2個選項卡之間切換

Answer 1

您可以使用類綁定，例如：

@Component({
  selector: '...',
  template: `
    <div class="tab-change-login">
        <ul class="un-styled tab-ul">
            <li [class.tab-active]="activeTabName == 'signin-area'" 
                data-login="signin-area"
                (click)="activeTabName = 'signin-area'">SIGN IN</li>
            <li [class.tab-active]="activeTabName == 'signup-area'" 
                data-login="signup-area"
                (click)="activeTabName = 'signup-area'">SIGN UP</li>
        </ul>
    </div>
`})
export class MyComponennt {
  activeTabName = 'signup-area';
}

還有其他類似ngClass的方式