在悬停时有条件地添加 html class 属性

Question

我想在悬停时添加 class 到 table 行。我知道我可以像这样添加 classes:

<tr [class.info]="isMyConditionTrue()"></tr>

和"info"class会在我的条件是true的时候加上。但是如何检查我的 table 行是否悬停？我可以将 typescript 中的一些内部变量在 (mouseenter) 上设置为 true，在 (mouseleave) 上设置为 false，但是如果我有很多由 *ngFor 生成的行，这是有问题的。我必须为每一行创建另一个组件或将它们存储在某个散列 table 中。有没有一种方法可以通过使用 <tr #row [class.info]="row.hovered"></tr>?

之类的东西来实现这一点

Answer 1

@Component({
  selector: 'hover-info'
  template: `<tr [class.info]="isHovered$ | async"></tr>
})
class HoverRow { 

   _hovers$: Subject<boolean> = BehaviorSubject.create(); 
   isHovered$: Observable<boolean> = this._hovers$.last();

   @HostListener('mouseover') onMouseover = () => this._hovers$.next(true); 
   @HostListener('mouseout') onMouseout = () => this._hovers$.next(false); 

}

AsyncPipe 是一个强大的东西。

请注意，there's an open proposal 用于简化此处所需样板的功能。我怀疑它会在发布前着陆，但预计很快就会发布。

在悬停时有条件地添加 html class 属性

Adding html class attribute conditionally on hover

typescript

angular2-template

angular