javascript - कोणीय 2 हॉवर घटना




angular events (6)

Html के लिए आपके js / ts फ़ाइल में जो होवर किया जाएगा

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

आपके HTML में जो होवर किया जाएगा

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

आपके js / ts फ़ाइल में होवरिंग की जानकारी प्राप्त होगी

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

आपके HTML एलिमेंट में जो js / ts फाइल को पकड़ने से जुड़ा है

(elemHovered) = "elemHoveredCatch($event)"

नए Angular2 ढांचे में, क्या किसी को एक घटना की तरह एक मंडराना करने का उचित तरीका पता है?

Angular1 में ng-Mouseover , लेकिन लगता नहीं है कि इसे ले जाया गया है।

मैंने डॉक्स के माध्यम से देखा है और कुछ भी नहीं पाया है।


अगर आप किसी 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);
   }
}

कोणीय 2 में पूरी तरह कार्यात्मक हॉवर घटनाओं को लागू करने के लिए आपको माउसेंटर और मूसलीव इवेंट दोनों इन्वर्टर का उपयोग करना चाहिए।


ओवरिंग पर ईवेंट को संभालने के लिए, आप कुछ इस तरह की कोशिश कर सकते हैं (यह मेरे लिए काम करता है):

Html टेम्पलेट में:

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

कोणीय घटक में:

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

बस (mouseenter) कोणीय (mouseenter) विशेषता कोणीय 2 में करते हैं ...

अपने 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 {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 में उपलब्ध है। मैंने इसे कोणीय 4.xx में परीक्षण किया


हाँ वहाँ कोणीय 2 के बजाय कोणीय 2 के बजाय कोणीय 2 में ng-Mouseover , इसलिए आपको यह लिखना होगा: -

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

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

काम करने का उदाहरण

टिप्पणी में @Gunter सुझाव के रूप में वहाँ on-mouseover का वैकल्पिक है हम इसे भी उपयोग कर सकते हैं। कुछ लोग ऑन-प्रीफ़िक्स विकल्प को पसंद करते हैं, जिसे विहित रूप में जाना जाता है।

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







hover