当鼠标悬停在DOM中的特定元素上时订阅

问题描述

当将鼠标悬停在DOM中的特定元素上时，我需要订阅并执行一些操作。

例如：home.component.html

        <div class="container">
              <div class="row1"> </div>
              <div class="row2"> </div>
              <div class="row3"> </div>
        </div>

home.component.ts：

         import {
                 AfterViewInit,Component,Input,OnInit,} from '@angular/core';

                @Component({
                             selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.scss'],})
          export class homeComponent implements OnInit {
          
               public hover: boolean;

               constructor() {}

               ngOnInit(): void {
                     this.hover= true;       // it may be false also.
               }

          }

在上面的示例中，当将鼠标悬停在row1和row3元素上时，我需要订阅。另外，我需要检查一个称为“ hover”的变量，如果为true，则仅需要执行上述操作（mouSEOver）。如果变量为false，则无需检查鼠标悬停（无需执行任何操作），只需要取消订阅即可。谁能帮助我实现这一目标。

解决方法

只需对mouseenter和mouseleave事件做出反应。

<div (mouseenter)="setHover(true)" (mouseleave)="setHover(false)">Hover me to see additional text</div>
<div *ngIf="shouldShow">HELLO WORLD</div>

export class AppComponent  {
  canHover: boolean = true;
  isHover: boolean = false;

  setHover(hover: boolean) {
   this.isHover = hover;
  }

  get shouldShow() {
    return this.canHover && this.isHover;
  }
}

请参见以下示例：https://stackblitz.com/edit/angular-ivy-2bdafy?file=src/app/app.component.ts

,

如果要预订来自多个元素的事件，则可以在2个元素的row1和row2上使用fromEvent，合并它们并相对于您的悬停布尔值进行过滤，如果触发了两个悬停事件之一，combinsLastest将发出一个值

import { merge,fromEvent  } from 'rxjs';
import { map,filter } from 'rxjs/operators';

@ViewChild('row1',{ static: true }) row1: ElementRef;
@ViewChild('row2',{ static: true }) row2: ElementRef;

merge(
 fromEvent(this.row1.nativeElement,'mouseover'),fromEvent(this.row2.nativeElement,'mouseover')
).pipe(
 filter(_ => !!this.hover),map((event) => {
  // some control here
 })
).subscribe();