是的，angular2中有on-mouseover，而不是angular 1中的ng-Mouseover。所以你必须这样写:-

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

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

正如@Gunter在评论中建议的那样，我们也可以使用on-mouseover。有些人更喜欢带前缀的替代形式，称为规范形式。

更新

HTML代码-

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

控制器/。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");
  }
}

工作示例

其他一些鼠标事件也可以在Angular中使用

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

在Angular2+中简单地做(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);
  }
} 

是的，angular2中有on-mouseover，而不是angular 1中的ng-Mouseover。所以你必须这样写:-

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

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

正如@Gunter在评论中建议的那样，我们也可以使用on-mouseover。有些人更喜欢带前缀的替代形式，称为规范形式。

更新

HTML代码-

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

控制器/。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");
  }
}

工作示例

其他一些鼠标事件也可以在Angular中使用

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

@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

如果您想在任何HTML元素上执行类似悬停的事件，那么您可以这样做。

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中完全实现功能性的悬停事件。

如果你对鼠标进出某个组件感兴趣，你可以使用@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)中的链接所解释的那样