如何使用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功能usiing 2個標籤之間切換angular2

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