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

Question

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

में Angular1 वहाँ था ng-Mouseover, लेकिन उस से अधिक किया गया है प्रतीत नहीं होता है।

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

Comments

यह सिर्फ ऑनमूवर है।

— dfsq

इस पेज की जाँच angular.io/docs/ts/latest/guide/attribute-directives.html

— ब्रैंडन नाइट

मुझे लगता है कि mousemoveघटना यहां भी मदद कर सकती है। उदाहरण के लिए इस पृष्ठ को देखें

— Abhi

Answer 1

अगर आप किसी 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 में पूरी तरह कार्यात्मक हॉवर घटनाओं को लागू करने के लिए आपको माउसेंटर और मूसलीव ईवेंट इनवर्टर दोनों का उपयोग करना चाहिए।

Comments

मैं इसे कोणीय घटक .ts फ़ाइल से कैसे ट्रिगर कर सकता हूं?

— मयूर कुकड़िया

@mayurkukadiya नीचे मेरा अपडेट किया हुआ उत्तर देखें - stackoverflow.com/a/37688325/5043867

— परदीप जैन

Answer 2

हाँ कोणीय 1.x on-mouseoverकी ng-Mouseoverतरह कोणीय 2 में है, इसलिए आपको यह लिखना होगा: -

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

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

कुछ अन्य माउस आयोजनों का उपयोग कोणीय में किया जा सकता है -

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

Comments

क्यों नहीं <div (mouseover)='over()'? ;-)

— गुंटर ज़ोचाउर

@ GünterZöchbauer, क्या उनकी सभी घटनाओं की सूची किसी प्रकार की है? मैंने कोणीय 2 साइट पर देखा और नहीं पाया (माउसओवर)

— crh225

ये कोणीय घटनाएँ नहीं हैं बल्कि ब्राउज़र की घटनाएँ हैं।

— गुंटर ज़ोचबॉयर 14

स्पष्ट रूप से यह तरीका है, लेकिन क्या किसी के पास इसके लिए कोणीय दस्तावेज का लिंक है? मुझे लगता है कि यह सुपर अमूर्त और विरल है। मैं सिर्फ व्हाट्सएप की सूची ढूंढ रहा हूं ताकि मुझे पता चले कि मानक क्या है।

— thePartyTurtle

Answer 3

आप इसे एक मेजबान के साथ कर सकते हैं:

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

}

बस इसे अपने कोड के अनुकूल करें (इसमें पाया गया: https://angular.io/docs/ts/latest/guide/attribute-directives.html )

Answer 4

यदि आप माउस में रुचि रखते हैं या अपने किसी एक घटक को छोड़ रहे हैं तो आप @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 ) को बताया गया है

Answer 5

बस (mouseenter)Angular2 + में विशेषता ...

अपने 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);
  }
} 

Answer 6

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

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

Answer 7

यदि सभी घटक के लिए माउस ओवर आपका विकल्प है, तो आप सीधे @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.x.x

Answer 8

@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

Answer 9

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