Javascript 角度2悬停事件

在新的Angular2框架中，有人知道像事件一样悬停的正确方法吗

在Angular1中有

ng鼠标盖

，但这似乎没有被遗留下来

---

我查看了文档，没有发现任何东西。

是的，angular2中的鼠标盖上有

，

，而不是Angular1.x中的

ng鼠标盖

，因此您必须编写以下内容：-

hello mouseover
超过（）{
log（“调用鼠标器”）；
}

正如@Gunter在评论中所建议的，在鼠标上方有

的替代选项，我们也可以使用它。有些人更喜欢带前缀的替代形式，称为规范形式

更新
HTML代码-

hello mouseover

控制器/.TS代码-

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
超过（）{
log（“调用鼠标器”）；
}
out（）{
log（“调用Mouseout”）；
}
}


其他一些鼠标事件也可以在Angular中使用-

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"

您可以使用主机执行此操作：

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[myHighlight]',
  host: {
    '(mouseenter)': 'onMouseEnter()',
    '(mouseleave)': 'onMouseLeave()'
  }
})
export class HighlightDirective {
  private _defaultColor = 'blue';
  private el: HTMLElement;

  constructor(el: ElementRef) { this.el = el.nativeElement; }

  @Input('myHighlight') highlightColor: string;

  onMouseEnter() { this.highlight(this.highlightColor || this._defaultColor); }
  onMouseLeave() { this.highlight(null); }

   private highlight(color:string) {
    this.el.style.backgroundColor = color;
  }

}

只要根据您的代码调整它（位于：）
如果您想在任何HTML元素上执行类似悬停的事件，那么您可以这样做

HTML


A组
B组

组件

从'@angular/core'导入{Component}；
@组成部分({
moduleId:module.id，
选择器：“基本细节”，
templateUrl:'basic.component.html'，
})
导出类基本组件{
鼠标指针（div:string）{
log（“鼠标输入：+div”）；
}
mouseLeave（div:string）{
log（'鼠标左键：'+div）；
}
}

您应该同时使用
mouseenter
和
mouseleave
事件，以便在angular 2中完全实现功能性悬停事件。
要处理覆盖时的事件，可以尝试以下方法
（它对我有用）：

在Html模板中：

<div (mouseenter)="onHovering($event)" (mouseleave)="onUnovering($event)">
  <img src="../../../contents/ctm-icons/alarm.svg" class="centering-me" alt="Alerts" />
</div>

@组件({
选择器：'拖放'，
模板：`
拖放
`,
})

在js/ts文件中显示将悬停的html

@Output() elemHovered: EventEmitter<any> = new EventEmitter<any>();
onHoverEnter(): void {
    this.elemHovered.emit([`The button was entered!`,this.event]);
}

onHoverLeave(): void {
    this.elemHovered.emit([`The button was left!`,this.event])
}

 (mouseenter) = "onHoverEnter()" (mouseleave)="onHoverLeave()"

在js/ts文件中，将接收悬停信息

elemHoveredCatch(d): void {
    console.log(d)
}

在与捕获js/ts文件连接的HTML元素中

(elemHovered) = "elemHoveredCatch($event)"

如果您对鼠标进入或离开某个组件感兴趣，可以使用
@HostListener
装饰器：

import { Component, HostListener, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.scss']
})
export class MyComponent implements OnInit {

  @HostListener('mouseenter') 
  onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') 
  onMouseLeave() {
    this.highlight(null);
  }

...

}

正如@Brandon comment to OP（）
中的链接所解释的，只需在Angular2+中执行
（mouseenter）
属性

在HTML中，请执行以下操作：

<div (mouseenter)="mouseHover($event)">Hover!</div> 

如果您可以选择将鼠标移到整个组件上，则可以直接通过
@hostListener
来处理事件，以执行下面的鼠标移到所有组件上

  import {HostListener} from '@angular/core';

  @HostListener('mouseenter') onMouseEnter() {
    this.hover = true;
    this.elementRef.nativeElement.addClass = 'edit';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.hover = false;
    this.elementRef.nativeElement.addClass = 'un-edit';
  }

它在
@angular/core
中提供。我在angular
4.x.x
中测试了它，它就在MouseOver上。查看此页面，我认为
mousemove
事件在这里也有帮助。为什么不
@GünterZöchbauer，他们的作品是所有事件的某种列表？我查看了angular 2网站，但没有找到（鼠标悬停）这些不是angular事件，而是浏览器事件。显然这是一种方式，但是有人有angular文档的链接吗？我觉得它非常抽象和稀疏。我只是在寻找一个关于什么的列表，这样我就知道什么是标准的。如何从angular component.ts文件触发它？@mayurkukadiya在下面看到我的更新答案-
<div (mouseenter)="mouseHover($event)">Hover!</div> 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'component',
  templateUrl: './component.html',
  styleUrls: ['./component.scss']
})

export class MyComponent implements OnInit {

  mouseHover(e) {
    console.log('hovered', e);
  }
} 

  import {HostListener} from '@angular/core';

  @HostListener('mouseenter') onMouseEnter() {
    this.hover = true;
    this.elementRef.nativeElement.addClass = 'edit';
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.hover = false;
    this.elementRef.nativeElement.addClass = 'un-edit';
  }