Question

<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"

}

当我点击3中的任何一个li项目时，我有上面的列表，应该更改单击的标签颜色。当我点击另一个项目时，所有项目颜色应该恢复为原始状态并更改当前点击项目的颜色。

Answer 1

使用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：

.blue{
   color:blue;
}

Answer 2

@Mehdi说，你不应该直接访问DOM，直到有需要。

始终牢记，用数据驱动您的视图而不是访问 DOM直接

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

使用Angular 2向li组添加和删除样式

2 个答案: