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

单击一个选项卡时，我想激活类

选项卡

，并将其从另一个选项卡中删除，反之亦然。我要在其上实现此功能的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>

登录
注册

---

如何使用angular2编写onClick函数在两个选项卡之间切换？您可以使用类绑定，如：

@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';
}

@组件({
选择器：“…”，
模板：`

登录
注册

`})
导出类MyComponent{
activeTabName='注册区域'；
}

---

还有其他类似的方法，如

Hi，谢谢，这很有效，但是现在如果我必须根据选择的选项卡隐藏特定部分，那么使用ngIf检查

activeTabName

值并相应地隐藏/取消隐藏是否有效？当然

ngIf

或

ngSwitch