使用Angular 2添加和刪除樣式到li組

<ul> 
<li (click)="AddColor($event)">ONE</li> 
<li (click)="AddColor($event)">TWO</li> 
<li (click)="AddColor($event)">THREE</li> 
</ul> 

AddColor(e){ 

e.srcElement.style.color="blue" 

}

我有上面的列表，當我點擊li項目中的任何一個時，點擊的標籤顏色應該被改變。當我點擊另一個所有項目的顏色應該恢復到原來的，並改變當前點擊項目的顏色。使用Angular 2添加和刪除樣式到li組

來源

2017-09-25 Mithun Sudheendran

ü可以添加一個工作搗鼓你quewstion –

@AravindReddy：https://plnkr.co/edit/2AZ2s6CHr6Hm1W8lJhZA？p = preview –

更改爲[class.blue] =「activeLink ===我」一個（click）=「activeLink = i」 – Vega

@Mehdi說，你不應該直接訪問DOM直到有需要。

始終牢記，驅動與數據視圖，而不是訪問 DOM直接

I have forked and working snippet https://plnkr.co/edit/fgINMc?p=preview

來源

2017-09-25 05:37:52

表現明智，我從未附加方法到像「永久事件」 [class.bold-class] =「isActiveLink（link）因爲，Angular會不斷調用this.isActiveLink來查看v Alue已經改變。我會使用數據綁定變量來代替selectLink方法可以更新，以便Angular在發生變化時將更改傳播到視圖。如果你想檢查這個行爲，在isActiveLink裏放一個斷點 – Mehdi

使用Angular時，您不想直接操作DOM元素。而是讓角度處理它。在你的榜樣，您可以生成一個數組列表，你在代碼中聲明，像這樣

export class YourClass{ 
    links:any; 
    activeLink = -1; 
    //... 
    constructor(){ 
     this.links = ['ONE','TWO','THREE'] 
    } 
    //... 
}

，然後在您的模板，你可以有：

<ul> 
    <li *ngFor="let link of links; let i = index" 
     (click)="activeLink = i" 
     [ngClass]="activeLink == i? 'blue' : '' " > 
    </li> 
</ul>

，並聲明CSS類藍色：

.blue{ 
    color:blue; 
}

來源

2017-09-25 05:13:32 Mehdi

使用Angular 2添加和刪除樣式到li組

回答

相關問題