Dalam kerangka Angular2 baru , apakah ada yang tahu cara yang tepat untuk melakukan hover seperti acara?

Di Angular1 ada ng-Mouseover, tapi itu sepertinya tidak terbawa.

Saya telah memeriksa dokumen dan belum menemukan apa pun.

Jika Anda ingin melakukan hover like event pada elemen HTML apa pun, maka Anda dapat melakukannya seperti ini.

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>

Komponen

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

Anda harus menggunakan peristiwa mouseenter dan mouseleave inorder untuk mengimplementasikan acara hover yang berfungsi penuh di sudut 2.

ya ada on-mouseoverdi angular2 bukan ng-Mouseoverseperti di angular 1.x jadi Anda harus menulis ini: -

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

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

Sebagai @Gunter Diusulkan dalam komentar ada alternatif yang on-mouseoverbisa kita gunakan juga. Beberapa orang lebih suka alternatif awalan, yang dikenal sebagai bentuk kanonik.

Memperbarui

Kode HTML -

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

Kode Controller / .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");
  }
}

Contoh Kerja

Beberapa acara Mouse lainnya dapat digunakan dalam Angular -

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

Anda dapat melakukannya dengan host:

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

}

Cukup sesuaikan dengan kode Anda (ditemukan di: https://angular.io/docs/ts/latest/guide/attribute-directives.html )

Jika Anda tertarik dengan mouse yang masuk atau meninggalkan salah satu komponen Anda, Anda dapat menggunakan @HostListenerdekorator:

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

...

}

Seperti yang dijelaskan di tautan dalam komentar @Brandon kepada OP ( https://angular.io/docs/ts/latest/guide/attribute-directives.html )

Cukup lakukan (mouseenter)atribut di Angular2 + ...

Dalam HTML Anda lakukan:

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

dan di komponen Anda lakukan:

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

Untuk menangani acara overing, Anda dapat mencoba sesuatu seperti ini (ini bekerja untuk saya):

Dalam templat Html:

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

Dalam komponen sudut:

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

Jika tetikus untuk seluruh komponen adalah pilihan Anda, Anda bisa langsung @hostListenermenangani acara untuk melakukan tetikus di bawah ini.

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

Tersedia dalam nya @angular/core. Saya mengujinya dalam sudut4.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

Dalam file js / ts Anda untuk html yang akan di-hover

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

Di HTML Anda yang akan melayang

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

Dalam file js / ts Anda yang akan menerima info dari melayang

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

Dalam elemen HTML Anda yang terhubung dengan menangkap file js / ts

(elemHovered) = "elemHoveredCatch($event)"