Im Neuen Eckig2 Framework, kennt jemand den richtigen Weg, um einen Hover wie ein Ereignis durchzuführen?
Im Eckig1 dort war ng-Mouseover
aber das scheint nicht übernommen worden zu sein.
Ich habe die Unterlagen durchgesehen und nichts gefunden.
Ronin
Im Neuen Eckig2 Framework, kennt jemand den richtigen Weg, um einen Hover wie ein Ereignis durchzuführen?
Im Eckig1 dort war ng-Mouseover
aber das scheint nicht übernommen worden zu sein.
Ich habe die Unterlagen durchgesehen und nichts gefunden.
Vikash Dahiya
Wenn Sie ein Hover-ähnliches Ereignis für ein beliebiges HTML-Element ausführen möchten, können Sie dies folgendermaßen tun.
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>
Komponente
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);
}
}
Sie sollten beide verwenden mouseenter
und mouseleave
Events, um funktionale Hover-Events in Angle 2 vollständig zu implementieren.
Wie kann ich es aus der .ts-Datei der Winkelkomponente auslösen?
– Mayur Kukadiya
16. Oktober 2019 um 6:42 Uhr
@mayurkukadiya siehe meine aktualisierte Antwort unten -stackoverflow.com/a/37688325/5043867
– Pardeep Jain
18. Oktober 2019 um 6:52 Uhr
Einfache Lösung, also gebe ich +1
– Royce
1. Juni um 8:39 Uhr
@MayurKukadiya Definieren Sie einfach eine boolesche Variable, sagen wir booleanVariable: boolean = false; Variable mit Anfangswert auf false; Weisen Sie in der Funktion mouseEnter() einfach die boolesche Variable true zu und die Funktion mouseLeave() weisen Sie diese boolesche Variable false zu. Verwenden Sie schließlich * ngIf = “booleanVariable” im div, um vollständig darauf zuzugreifen.
– Arijit-Tasche
1. Juli um 19:51 Uhr
Pardeep Jain
ja da ist on-mouseover
in angle2 statt ng-Mouseover
wie in angle 1.x also musst du das schreiben:-
<div on-mouseover="over()" style="height:100px; width:100px; background:#e2e2e2">hello mouseover</div>
over(){
console.log("Mouseover called");
}
Wie @Gunter im Kommentar vorgeschlagen, gibt es eine Alternative zu on-mouseover
das können wir auch verwenden. Einige Leute bevorzugen die On-Präfix-Alternative, die als kanonische Form bekannt ist.
HTML Quelltext –
<div (mouseover)='over()' (mouseout)='out()' style="height:100px; width:100px; background:#e2e2e2">hello mouseover</div>
Controller/.TS-Code –
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");
}
}
Einige andere Mausereignisse können in Angular verwendet werden –
(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"
Warum nicht <div (mouseover)='over()'
? 😉
– Günter Zöchbauer
8. Juni 2016 um 5:07 Uhr
@GünterZöchbauer, ist das eine Art Liste aller Veranstaltungen? Ich habe auf der Seite von Angle 2 nachgesehen und konnte nichts finden (mouseover)
– crh225
9. September 2016 um 20:30 Uhr
Dies sind keine Angular-Events, sondern Browser-Events.
– Günter Zöchbauer
10. September 2016 um 14:53 Uhr
Dies ist eindeutig der Weg, aber hat jemand einen Link zur Angular-Dokumentation dafür? Ich habe das Gefühl, dass es super abstrakt und spärlich ist. Ich suche nur nach einer Liste von On-Whatevers, damit ich weiß, was Standard ist.
– ThePartyTurtle
28. Juni 2017 um 19:01 Uhr
@Pardeep Jain, wie fügt man eine Klasse hinzu, wenn man den Mauszeiger bewegt, und entfernt diese Klasse, wenn man die Maus verlässt?
– abcid d
16. Juli 2021 um 11:42 Uhr
Sie können es mit einem Host tun:
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;
}
}
Passen Sie es einfach an Ihren Code an (zu finden unter: https://angular.io/docs/ts/latest/guide/attribute-directives.html )
Wenn Sie daran interessiert sind, dass die Maus eine Ihrer Komponenten betritt oder verlässt, können Sie die verwenden @HostListener
Dekorateur:
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);
}
...
}
Wie im Link in @Brandon Kommentar zu OP erklärt (https://angular.io/docs/ts/latest/guide/attribute-directives.html)
Alireza
Einfach machen (mouseenter)
Attribut in Angular2+…
Führen Sie in Ihrem HTML Folgendes aus:
<div (mouseenter)="mouseHover($event)">Hover!</div>
und in Ihrer Komponente tun:
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);
}
}
Dudi
Um das Ereignis beim Overing zu behandeln, können Sie Folgendes versuchen (es funktioniert bei mir):
In der HTML-Vorlage:
<div (mouseenter)="onHovering($event)" (mouseleave)="onUnovering($event)">
<img src="https://stackoverflow.com/questions/37686772/contents/ctm-icons/alarm.svg" class="centering-me" alt="Alerts" />
</div>
In der Winkelkomponente:
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"));
}
}
Aniruddha Das
Wenn der Mauszeiger für die gesamte Komponente Ihre Option ist, können Sie dies direkt tun @hostListener
Um die Ereignisse zu behandeln, bewegen Sie die Maus über al unten.
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";
}
Es ist verfügbar in @angular/core
. Ich habe es in eckig getestet 4.x.x
Es ist nur ein Mouseover.
– dfq
7. Juni 2016 um 18:33 Uhr
überprüfen Sie diese Seite angle.io/docs/ts/latest/guide/attribute-directives.html
– Brandon Ritter
7. Juni 2016 um 18:50 Uhr
Ich finde
mousemove
Event kann auch hier helfen. SIEHE DIESE SEITE ZUM BEISPIEL– Abhi
26. Juli 2018 um 7:53 Uhr