如何解决当鼠标悬停在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();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。