web-dev-qa-db-fra.com

Angular 2 Evénement de survol

Dans le nouveau cadre Angular2, est-ce que quelqu'un sait comment faire un vol stationnaire comme un événement?

Dans Angular1, il y avait ng-Mouseover, mais cela ne semble pas avoir été reporté.

J'ai parcouru la documentation et rien trouvé.

javascriptangulareventshover
156
Ronin

Si vous souhaitez effectuer un survol comme un événement sur un élément HTML, vous pouvez le faire comme ceci.

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>

composant

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

Vous devez utiliser les événements mouseenter et mouseleave afin de mettre en œuvre des événements de survol entièrement fonctionnels dans angular 2.

176
Vikash Dahiya

oui, il y a on-mouseover dans angular2 au lieu de ng-Mouseover comme dans angular 1.x, vous devez donc écrire ceci: -

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

over(){
    console.log("Mouseover called");
  }

Working Example

Comme @Gunter suggéré dans le commentaire, il existe une alternative à on-mouseover, nous pouvons également l'utiliser. Certaines personnes préfèrent l'alternative sur préfixe, connue sous le nom de forme canonique.

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

Vous pouvez le faire avec un hôte:

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

}

Adaptez-le simplement à votre code (à l'adresse: https://angular.io/docs/ts/latest/guide/attribute-directives.html )

28
bene

Si vous souhaitez que la souris saisisse ou quitte l'un de vos composants, vous pouvez utiliser le décorateur @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);
  }

...

}

Comme expliqué dans le lien dans le commentaire de @Brandon to OP ( https://angular.io/docs/ts/latest/guide/attribute-directives.html )

15
paul

Il suffit de faire l'attribut (mouseenter) dans Angular2 + ...

Dans votre HTML, faites:

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

et dans votre composant faire:

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

Pour gérer l'événement sur overing, vous pouvez essayer quelque chose comme ceci (cela fonctionne pour moi):

Dans le modèle HTML:

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

Dans le composant 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"));
    }
}
7
Dudi

Si vous avez l'option de survoler entièrement le composant, vous pouvez directement utiliser @hostListener pour gérer les événements et effectuer le survol de la souris ci-dessous.

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

Son disponible dans @angular/core. Je l'ai testé dans angular 4.x.x

4
Aniruddha Das
@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

2
Clayton K. N. Passos

Dans votre fichier js/ts pour le code HTML qui sera survolé

@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])
}

Dans votre HTML qui sera survolé

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

Dans votre fichier js/ts qui recevra les informations du survol

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

Dans votre élément HTML associé à la capture du fichier js/ts

(elemHovered) = "elemHoveredCatch($event)"
1
Lyudmil Petrov