在新的Angular2框架中,有人知道如何像事件一样执行悬停吗?
在Angular1中有ng-Mouseover,但这似乎没有被延续。
我看了所有的文件,什么都没发现。
在新的Angular2框架中,有人知道如何像事件一样执行悬停吗?
在Angular1中有ng-Mouseover,但这似乎没有被延续。
我看了所有的文件,什么都没发现。
当前回答
在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);
}
}
其他回答
如果你对鼠标进出某个组件感兴趣,你可以使用@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)中的链接所解释的那样
是的,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
如果鼠标在整个组件上是你的选项,你可以直接是@hostListener来处理事件来执行鼠标在下面的al。
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';
}
它在@angular/core中可用。我在angular 4.x.x中测试了它
在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);
}
}