在 mouseover/mouseout 上更新布尔值答案

【问题标题】：Update boolean value on mouseover/mouseout在 mouseover/mouseout 上更新布尔值
【发布时间】：2020-07-28 22:34:16
【问题描述】：

我正在尝试在鼠标悬停/鼠标移出时更新布尔值（它应该动态更改），以便稍后在 if else 语句中使用它并根据真/假分配一些函数。但它只显示false 而从不显示true。有人可以帮帮我吗？

ts：

    mouseEv: boolean;

    mouseOut(e) {
        this.mouseEv = false;
    }

    mouseOver(e) {
        this.mouseEv = true;
    } 

    ngOnInit(): void { 
        if(this.mouseEv == false){ func(); }
        else if(this.mouseEv == true) { otherFunc();};
    }

html:

<div (mouseover)=" mouseOver($event)" (mouseout)="mouseOut($event)"></div>

编辑：我需要动态更改布尔值，因为我会将它与具有函数的对象一起使用，并且我不能从另一个函数中调用它们。

【问题讨论】：

这能回答你的问题吗？ How to use mouseover and mouseout in Angular 6
您只检查ngOnInit 上的mouseEv 值，它只会执行一次。
@Karan 如何更改它以便多次执行？

标签： javascript angular

【解决方案1】：

创建一个函数，例如 MouseHandlerEv 以接收布尔值：

.HTML 文件

<div (mouseover)="mouseEvHandler(true)" (mouseout)="mouseEvHandler(false)"></div>

.TS 文件

mouseEvHandler(status){
   status ? FunctionTrue() : FunctionFalse();
}

例子：

function mouseEvHandler(status){
   status ? sayHi() : sayBye();
}

function sayHi() {
  console.log('HI');
}

function sayBye() {
  console.log('Bye');
}

 &lt;div onmouseover="mouseEvHandler(true)" onmouseout="mouseEvHandler(false)"&gt;MESSAGE ON CONSOLE&lt;/div&gt;

外推成角度

【讨论】：

【解决方案2】：

您可以像下面这样简单地使用它，而无需为事件创建函数：

<div (mouseover)="mouseEv=true" (mouseout)="mouseEv=false"></div>

您也可以尝试在 mouseOver(true) 中直接将 true 和 false 作为方法参数传递，并在组件中接收其值。

【讨论】：

它根本不会改变值

【解决方案3】：

目前，由于您正在检查 ngOnInit() 挂钩中的值，因此仅在组件开始时检查值一次。您可以尝试使用 RxJS fromEvent 使其具有响应性并使用它来触发事件。

试试下面的

模板

<div #mouseControl></div>

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({ ... })
export class AppComponent implements AfterViewInit {
  @ViewChild('mouseControl') mouseControl: ElementRef<any>;

  ngAfterViewInit() {
    fromEvent(this.mouseControl.nativeElement, 'mouseover').subscribe(
      _ => otherFunc();
    );

    fromEvent(this.mouseControl.nativeElement, 'mouseout').subscribe(
      _ => func();
    );
  }
}

【讨论】：