如何使用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