Trong khung Angular2 mới , có ai biết cách thích hợp để thực hiện di chuột như một sự kiện không?

Trong Angular1 đã có ng-Mouseover, nhưng dường như điều đó đã không được thực hiện.

Tôi đã xem qua các tài liệu và không tìm thấy gì.

Nếu bạn muốn thực hiện di chuột như sự kiện trên bất kỳ phần tử HTML nào, thì bạn có thể làm điều đó như thế này.

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>

Thành phần

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

Bạn nên sử dụng cả hai sự kiện mouseenter và mouseleave để thực hiện các sự kiện di chuột đầy đủ chức năng trong góc 2.

vâng, có on-mouseovertrong angular2 thay vì ng-Mouseovernhư trong angular 1.x nên bạn phải viết cái này: -

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

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

Như @Gunter được đề xuất trong bình luận, on-mouseoverchúng tôi cũng có thể sử dụng cái này. Một số người thích thay thế tiền tố, được gọi là hình thức chính tắc.

Cập nhật

Mã HTML -

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

Mã điều khiển / .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");
  }
}

Ví dụ làm việc

Một số sự kiện Chuột khác có thể được sử dụng trong Angular -

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

Bạn có thể làm điều đó với một máy chủ:

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

}

Chỉ cần điều chỉnh nó theo mã của bạn (được tìm thấy tại: https://angular.io/docs/ts/latest/guide/attribution-directives.html )

Nếu bạn quan tâm đến việc chuột vào hoặc để lại một trong các thành phần của bạn, bạn có thể sử dụng trình @HostListenertrang trí:

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

...

}

Như đã giải thích trong liên kết trong @Brandon nhận xét tới OP ( https://angular.io/docs/ts/latest/guide/attribution-directives.html )

Đơn giản chỉ cần làm (mouseenter)thuộc tính trong Angular2 + ...

Trong HTML của bạn làm:

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

và trong thành phần của bạn làm:

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

Để xử lý sự kiện trên overing, bạn có thể thử một cái gì đó như thế này (nó hoạt động với tôi):

Trong mẫu Html:

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

Trong thành phần góc:

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

Nếu chuột trên tất cả các thành phần là tùy chọn của bạn, bạn có thể trực tiếp @hostListenerxử lý các sự kiện để thực hiện chuột trên al bên dưới.

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

Nó có sẵn trong @angular/core. Tôi đã thử nó ở góc4.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

Trong tệp js / ts của bạn cho html sẽ được di chuột

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

Trong HTML của bạn sẽ được di chuột

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

Trong tệp js / ts của bạn sẽ nhận được thông tin di chuột

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

Trong phần tử HTML của bạn được kết nối với bắt tệp js / ts

(elemHovered) = "elemHoveredCatch($event)"