在鼠标悬停/鼠标移出时更新布尔值

Question

我正在尝试在 mouseover/mouseout 时更新布尔值（它应该动态更改），以便稍后在 if else 语句中使用它并根据 true/false 分配一些函数。但它只显示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>编辑：我需要动态更改布尔值，因为我会将它与其中具有函数的对象一起使用，而我不能从另一个函数调用它们。

Answer 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');

}

 <div onmouseover="mouseEvHandler(true)" onmouseout="mouseEvHandler(false)">MESSAGE ON CONSOLE</div>

将其外推到角度

Answer 2

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

    );

  }

}

Answer 3

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

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

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