如何在 Angular 6 中使用 mouseover 和 mouseout答案

【问题标题】：How to use mouseover and mouseout in Angular 6如何在 Angular 6 中使用 mouseover 和 mouseout
【发布时间】：2021-05-21 19:10:20
【问题描述】：

我有这个旧的 Angular 代码，它可以工作，但不能在最新版本的 Angular 6 中使用。

<div ng-mouseover="changeText=true" ng-mouseleave="changeText=false" ng-init="changeText=false">
  <span ng-hide="changeText">Hide</span>
  <span ng-show="changeText">Show</span>
</div>

我如何使它适用于 Angular 6？我知道我必须使用(mouseover) 和(mouseout)，但我无法成功实现。

【问题讨论】：

AngularJS 被完全重写为 Angular2+，你去过哪里:)。换句话说，AngularJS 语法永远不会与 Angular6 一起工作。
被抛在孤岛出不来。
欢迎回来:) 有很多东西要赶上。我建议完全忘记 AngularJS，从 Angular6 开始——不妨从头开始。
我正在这样做，但找不到成功解释（mouseout）的文章，因此在这里询问。

标签： angular

【解决方案1】：

Angular6 的等效代码应该是：

app.component.html

<div (mouseover)="changeText=true" (mouseout)="changeText=false">
  <span *ngIf="!changeText">Hide</span>
  <span *ngIf="changeText">Show</span>
</div>

app.component.ts

@Component({
   selector: 'app-main',
   templateUrl: './app.component.html'
})
export class AppComponent {
    changeText: boolean;
    constructor() {
       this.changeText = false;
    }
}

请注意，不再有 $scope 这样的东西，因为它存在于 AngularJS 中。它已被组件类中的成员变量替换。此外，也没有基于原型继承的范围解析算法——它要么解析为组件类成员，要么不解析。

【讨论】：

别忘了，在你的.ts文件中你应该添加一个名为changeText: boolean = false的变量
这有什么关系，即使您没有在ts 中定义changeText，它也不会中断。
谢谢。我正在尝试[hidden] 而不是使用!。这解决了它:)
@Stavm 我在构造函数的顶部添加了public changeText;。我希望那是一样的？
@NikitaGupta 是一样的。我假设您添加了public，因为 TSLINT 对您大喊大叫。 @manish 基于同一思路，您可以仅使用 <div> 元素构建整个 HTML 页面，并使用 CSS 设置样式。你可以，但你不应该。

【解决方案2】：

补充已经说过的内容。

如果你想*ngFor 一个元素，并在其中隐藏\显示元素，悬停时，就像你在 cmets 中添加的那样，你应该重新考虑整个概念。

一种更合适的方法，根本不涉及角度。我会改用纯 CSS，使用它的原生 :hover 属性。

类似：

App.Component.css

div span.only-show-on-hover {
    visibility: hidden;
}
div:hover span.only-show-on-hover  {
    visibility: visible;
}

App.Component.html

  <div *ngFor="let i of [1,2,3,4]" > hover me please.
    <span class="only-show-on-hover">you only see me when hovering</span>
  </div>

演示：STACKBLITZ

【讨论】：

这肯定比在循环中使用 *ngIf 更有效

【解决方案3】：

To avoid blinking problem use following code
its not mouseover and mouseout instead of that use mouseenter and mouseleave


**app.component.html**

    <div (mouseenter)="changeText=true" (mouseleave)="changeText=false">
      <span *ngIf="!changeText">Hide</span>
      <span *ngIf="changeText">Show</span>
    </div>

**app.component.ts**

@Component({
   selector: 'app-main',
   templateUrl: './app.component.html'
})
export class AppComponent {
    changeText: boolean;
    constructor() {
       this.changeText = false;
    }
}

【讨论】：

它应该是“mouseleave”而不是“mouseLeave”

【解决方案4】：

您可以使用(mouseover) 和(mouseout) 事件。

组件.ts

changeText:boolean=true;

component.html

<div (mouseover)="changeText=true" (mouseout)="changeText=false">
  <span [hidden]="changeText">Hide</span>
  <span [hidden]="!changeText">Show</span>
</div>

【讨论】：

非常感谢。我已将第一个答案标记为已解决。

【解决方案5】：

如果您有兴趣，请使用指令属性。代码可能看起来有点难，但它显示了 Angular 6 的所有属性。这里添加一个示例代码

import { Directive, OnInit, ElementRef, Renderer2 ,HostListener,HostBinding,Input} from '@angular/core';
import { MockNgModuleResolver } from '@angular/compiler/testing';
//import { Event } from '@angular/router';

@Directive({
  selector: '[appBetterHighlight]'
})
export class BetterHighlightDirective implements OnInit {
   defaultcolor :string = 'black'
   Highlightedcolor : string = 'red'
    @HostBinding('style.color') color : string = this.defaultcolor;

  constructor(private elm : ElementRef , private render:Renderer2) { }
ngOnInit()
{}
@HostListener('mouseenter') mouseover(event :Event)
{

  this.color= this.Highlightedcolor ;
}
@HostListener('mouseleave') mouseleave(event: Event)
{

  this.color = this.defaultcolor;
}
}

只需在模板中的任意位置使用选择器名称“appBetterHighlight”即可访问此属性。

【讨论】：

【解决方案6】：

CSS 解决方案可以正常工作！

https://www.w3schools.com/code/tryit.asp?filename=GJ4PCJMVQ4LN https://www.w3schools.com/code/tryit.asp?filename=GJ4PPLCCEBRG

.col-info:hover>.popoverIcon {
    visibility: visible;
  }
}

.popoverIcon {
  visibility: hidden;
}

<div *ngFor="let i of [1,2,3,4]">

  <div class="col-info">
    <span class=" popoverIcon ">Show {{i}}</span>
  </div>

</div>

【讨论】：

【解决方案7】：

在 HTML 中：

<div (mouseover)="funcName1() (mouseout)="funcName2()">
   // Do what you want 
</div>

在 TypeScript 中：

funcName1(){
 //Do Something
}
funcName2(){
//Do Something
}

【讨论】：

【解决方案8】：

<div (mouseenter)="changeText=true" (mouseout)="changeText=false">
  <span *ngIf="!changeText">Hide</span>
  <span *ngIf="changeText">Show</span>
</div>

如果您想在 *ngFor 中使用，则分配悬停数据的对象值，然后检查其 id 并显示悬停信息/图标或类似的内容：-

 <div (mouseenter)="hoverCard(d)" (mouseleave)="hoverCard(null)" *ngFor="let d of data" class="col-lg-3 col-md-4 col-sm-6 mt-4">
   <a *ngIf="hoverData && hoverData.id == d.id" class="text-right"><i class="fas fa-edit"></i>Hover Text</a>
    Normal Text
  </div>

在 TS 文件中

  hoverData!:Data|null;

  hoverCard(d: Data|null){
    this.hoverData = sCatg;
  }

【讨论】：