Question

我想在悬停时向表行添加一个类。我知道我可以添加这样的类：

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

和＆＃34; info＆＃34;当我的条件为true时，我们会添加课程。但是如何检查表格行是否悬停？我可以在(mouseenter)上将typescript中的一些内部变量设置为true，在(mouseleave)上设置为false，但如果我有*ngFor生成的很多行，则会有问题。我必须为每一行创建另一个组件或将它们存储在一些哈希表中。有没有办法通过使用像<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类属性

1 个答案: