如何使用 Angular2 在单击时切换选项卡和更改 css 类？

Question

单击一个选项卡时，我想创建类 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