HTML-Klassenattribut bedingt bei Hover hinzufügen

Question

Ich möchte eine Klasse zu einer Tabellenzeile bei Hover hinzufügen. Ich weiß, ich Klassen wie folgt hinzufügen:

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

und „Info“ Klasse hinzugefügt wird, wenn mein Zustand true ist. Aber wie überprüfe ich, ob meine Tabellenzeile schwebt? Ich könnte einige innere Variable in Typoskript auf (mouseenter) auf True und auf (mouseleave) auf false setzen, aber es ist problematisch, wenn ich viele Zeilen von *ngFor generiert habe. Ich müsste für jede Zeile eine andere Komponente erstellen oder sie in einer Hash-Datei speichern. Gibt es eine Möglichkeit, dies zu erreichen, indem Sie etwas wie <tr #row [class.info]="row.hovered"></tr> verwenden?

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 ist eine mächtige Sache.

Beachten Sie, dass there's an open proposal für eine Funktion, die das hier benötigte Textbaustein vereinfachen würde. Ich bezweifle, dass es vor der Veröffentlichung landen wird, aber erwarte es bald danach.