Angular 2/4動態造型

Question

我如何在角度2/4中編寫這個？

$('nav ul li a').click(function(){ 
    $(this).closest('li').addClass('active'); 
    }); 

Answer 1

您應該使用屬性綁定

<nav> 
    <ul> 
     <li> 
      <a [class.active]="active"></a> 
     </li> 
    </ul> 
</nav> 

你應該在組件的以下

active:boolean =false 

Answer 2

可以添加CSS類動態例如在這裏看到

<ul> 
    <li *ngFor='let menu of navMenu'> 
     <a (click)='Styling(menu)' [class.active]='menu?.active'>hello {{menu?.name}}</a> 
    </li> 
</ul> 

Styling(menu){ 
    for(let i=0; i< this.navMenu.length; i++){ 
     this.navMenu[i].active = false; 
    } 
    menu.active = true; 
    } 

Working Plunker