Dans le nouveau framework Angular2 , est-ce que quelqu'un connaît la bonne façon de faire un survol comme un événement?

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

J'ai parcouru les documents et je n'ai rien trouvé.

Si vous souhaitez effectuer un événement de type survol sur n'importe quel é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 d'implémenter des événements de survol entièrement fonctionnels dans angular 2.

oui il y a on-mouseoverdans angular2 au lieu de ng-Mouseovercomme dans angular 1.x donc vous devez écrire ceci: -

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

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

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

Mettre à jour

Code HTML -

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

Contrôleur / Code .TS -

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

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

  out(){
    console.log("Mouseout called");
  }
}

Exemple de travail

Certains autres événements de souris peuvent être utilisés dans Angular -

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

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

}

Il suffit de l'adapter à votre code (disponible sur: https://angular.io/docs/ts/latest/guide/attribute-directives.html )

Si vous êtes intéressé par l'entrée ou la sortie de la souris dans l'un de vos composants, vous pouvez utiliser le @HostListenerdécorateur:

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 @Brandon vers OP ( https://angular.io/docs/ts/latest/guide/attribute-directives.html )

(mouseenter)Attribuez simplement dans Angular2 + ...

Dans votre HTML, faites:

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

et dans votre composant, faites:

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

Pour gérer l'événement lors du dépassement, 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 la composante angulaire:

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

Si la souris sur tout le composant est votre option, vous pouvez directement @hostListenergérer les événements pour effectuer la souris sur tous 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';
  }

Il est disponible au format @angular/core. Je l'ai testé en angulaire4.x.x

@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

Dans votre fichier js / ts pour le 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 qui est connecté avec le fichier js / ts de capture

(elemHovered) = "elemHoveredCatch($event)"