Angular 2hover事件

在新的Angular 2框架中，有没有人知道像事件一样hover的正确方法？ 在Angular 1中有ng-Mouseover，但似乎没有被结转。 我查看了文档，没有find任何东西。

Answer 1

如果你想执行像任何HTML元素的事件hover比你可以这样做。

在HTML中

<div (mouseenter) ="mouseEnter('div a') " (mouseleave) ="mouseLeave('div A')"> <h2>Div A</h2> </div> <div (mouseenter) ="mouseEnter('div b')" (mouseleave) ="mouseLeave('div B')"> <h2>Div B</h2> </div> 

现在在组件中

 import { Component } from '@angular/core'; @Component({ moduleId: module.id, selector: 'basic-detail', templateUrl: 'basic.component.html', }) export class BasicComponent{ mouseEnter(div : string){ console.log("mouse enter : " + div); } mouseLeave(div : string){ console.log('mouse leave :' + div); } } 

您应该使用mouseenter和mouseleave事件来实现angular度2中的全functionhover事件。

Answer 2

是的，有angular2中on-mouseover ，而不是ng-Mouseover就像在angular度1.x，所以你必须写这个：

 <div on-mouseover='over()' style="height:100px; width:100px; background:#e2e2e2">hello mouseover</div> over(){ console.log("Mouseover called"); } 

工作示例

作为@Gunterbuild议在评论中有on-mouseover替代我们也可以使用这个。 有些人更喜欢使用前缀替代方法，称为规范forms。

 <div (mouseover)='over()' style="height:100px; width:100px; background:#e2e2e2">hello mouseover</div> 

Answer 3

你可以做一个主机：

 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; } } 

只是适应你的代码（在https://angular.io/docs/ts/latest/guide/attribute-directives.htmlfind）;

Answer 4

为了处理覆盖事件，你可以尝试这样的事情（这对我有用）：

在Html模板中：

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

在angular度分量中：

  onHovering(eventObject) { console.log("AlertsBtnComponent.onHovering:"); var regExp = new RegExp(".svg" + "$"); var srcObj = eventObject.target.offsetParent.children["0"]; if (srcObj.tagName == "IMG") { srcObj.setAttribute("src", srcObj.getAttribute("src").replace(regExp, "_h.svg")); } } onUnovering(eventObject) { console.log("AlertsBtnComponent.onUnovering:"); var regExp = new RegExp("_h.svg" + "$"); var srcObj = eventObject.target.offsetParent.children["0"]; if (srcObj.tagName == "IMG") { srcObj.setAttribute("src", srcObj.getAttribute("src").replace(regExp, ".svg")); } } 

Answer 5

 @Component({ selector: 'drag-drop', template: ` <h1>Drag 'n Drop</h1> <div #container class="container" (mousemove)="onMouseMove( container)"> <div #draggable class="draggable" (mousedown)="onMouseButton( container)" (mouseup)="onMouseButton( container)"> </div> </div>`, }) 

http://lishman.io/angular-2-event-binding

Answer 6

如果您对鼠标进入或离开某个组件感兴趣，可以使用@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对OP的评论（ https://angular.io/docs/ts/latest/guide/attribute-directives.html ）

Answer 7

只需在(mouseenter) Angular2 + (mouseenter)实现(mouseenter) mouseenter (mouseenter)属性…

在你的HTML做：

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

Answer 8

在您的js / ts文件中，将被hover的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]) } in your HTML that will be hovered (mouseenter)="onHoverEnter()" (mouseleave)="onHoverLeave()" in your js/ts file that will receive info of the hovering elemHoveredCatch(d): void { console.log(d) } in your HTML element that is connected with catching js/ts file (elemHovered)="elemHoveredCatch($event)" 

Answer 9

如果鼠标hover在整个组件上，您可以直接使用@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可用。 我testing它在angular度4.xx