Question

我是Angular的新手，尝试使用ng类表达式来应用类，但是class不适用于li元素。我想在mouseover事件上突出显示li元素。

<ul class="list-group sortable" [sortablejs]="images" [sortablejsOptions]="clone1Options">
  <li class="list-group-item" [ngClass]="{'active': selectedItem == item, 'highlight':hovering}" ng-init="hovering = false" ng-mouseenter="hovering=true"
ng-mouseleave="hovering=false" *ngFor="let item of images" (click)="displayImg($event, item)"><a >Element {{ item }}</a></li>
</ul>

有人可以纠正我吗？感谢您的帮助。

Answer 1

您可以添加多个这样的表达式：

ng-mouseenter="hovering=true; otherClass=true" ng-mouseleave="hovering=false; otherClass=false"

Answer 2

在您的模板

中

<li class="list-group-item" [class.active]="isActive" (mouseover)="addStyle()" (mouseout)="removeStyle()"> Some Text or element... </li>

添加您的 component.ts

isActive: boolean = false;

addStyle(){
  this.isActive= true;
}
removeStyle() {
  this.isActive= false;
}

，然后在样式表中添加css文件

.list-group-item.active {
   /* some style here...*/
}

当鼠标悬停在元素中时，然后 addStyle 函数单元并添加元素 avtice 类，当鼠标移出元素时，则删除类。活动类在您的样式表中包含某些样式。

如何在angular 6中使用ngclass在mouseenter事件上应用多个类

2 个答案: