时间戳

首页 > 解决方案 > 当鼠标悬停在 DOM 中的特定元素上时订阅

javascript - 当鼠标悬停在 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 元素上时，我需要订阅。我还需要检查一个名为“悬停”的变量，如果它是真的，那么我只需要执行上述操作（鼠标悬停）。如果变量为假，则无需检查鼠标悬停（无需执行任何操作），只需取消订阅即可。任何人都可以帮助我实现这一目标。

标签： javascriptangularrxjs5rxjs6rxjs-observables

解决方案

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

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();

推荐阅读