Angular2, HostListener, wie kann ich das target-element? kann ich die target-basierend auf der Klasse?

In Angular2, wie kann ich das target-element innerhalb des HostListener decorator?

@HostListener('dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

@HostListener('document: dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

@HostListener('myElement: dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

@HostListener('myElement.myClass: dragstart', ['$event'])
    onDragStart(ev:Event) {
        console.log(ev);
    }

Den beiden ersten arbeiten. Eine andere Sache, die ich ausprobiert habe, wirft ein EXCEPTION: Unsupported event target undefined for event dragstart

So, kann ich es implementieren, um eine gezielte element? Wie?

Können Sie rxjs übergeben Beobachter von den Eltern auf das Kind von der Veranstaltung?

InformationsquelleAutor Gerard | 2017-01-17

24

@HostListener() unterstützt nur window, document, und body als Globale event-Ziele, sonst ist es unterstützt nur die Komponenten host-element.

Dann, wenn ich will, einen listener hinzufügen, um ein bestimmtes element aus einem template (einer Komponente), die ich brauchen würde, um eine neue zu erstellen und getrennte Komponente? Ansonsten werde ich einen listener für das gesamte Vorlage, ist es nicht?
Wenn das element innerhalb der Komponente können Sie eine stackoverflow.com/questions/32693061/..., um eine ElementRef des Elements und dann können Sie ElementRef.nativeElement.addEventListener(...) verwenden, oder Sie können stackoverflow.com/a/41610950/217408. Wenn es außerhalb der Komponente, dann können Sie document.body.querySelector(...).addEventListener(...)
Die zweite option funktioniert nicht für mich wegen stackoverflow.com/questions/41695838/... und ich versuche nun zu verstehen deinem ersten link, danke!
Der erste link funktioniert nur für Elemente, die Hinzugefügt werden, indem Sie Eckige. Wenn Sie einige JavaScript-code oder jQuery-Bibliothek zum erstellen des elements-es wird nicht funktionieren.
Sie werden Elemente erstellt, in Winkel, Sie sind in einer Vorlage innerhalb einer Komponente, und ich möchte anfügen, einen listener für alle die Elemente, die mit einem bestimmten Klassennamen. Aber ich finde es schwer zu erreichen ist (dies sollte einfach sein-also ich muss fehlt etwas grundlegendes hier)

InformationsquelleAutor Günter Zöchbauer
16

Da die akzeptierte Antwort nicht wirklich helfen, das problem zu lösen, hier ist eine Lösung.

Einen besseren Weg, um dies zu erreichen, ist durch die Schaffung einer Richtlinie, auf diese Weise können Sie fügen Sie die Direktive für jedes element, die Sie wollen, und die Hörer werden nur Auslöser für dieses Besondere element.

Beispiel:
```
@Directive({
   selector: "[focus-out-directive]"
})
export class FocusOutDirective {
   @Output() onFocusOut: EventEmitter<boolean> = new EventEmitter<false>();

   @HostListener("focusout", ["$event"])
   public onListenerTriggered(event: any): void {
       this.onFocusOut.emit(true);
   }
}
```
Dann auf Ihre HTML-Elemente, die Sie anwenden möchten, diese Hörer, fügen Sie einfach die Richtlinie Selektor, in diesem Fall focus-out-directive, und stellen Sie dann die Funktion, die Sie möchten, um trigger auf Ihre Komponente.

Beispiel:

<input type='text' focus-out-directive (onFocusOut)='myFunction($event)'/>

Hi. Deine Antwort ist großartig. Aber, bedeutet das behandeln von Ereignissen für Kinder von elements?
dieser Anwendungsfall ist für einzelne HTML-Elemente. Um dies zu erreichen, müssten Sie zum importieren dieser Richtlinie in die entsprechenden Module, wo Sie es verwenden möchten, und dann gemäß der HTML-oben, fügen Sie die Direktive für jedes element, das Sie wollen, das Ereignis ausgelöst wird. Zum Beispiel, wenn Sie hatte verschachtelte untergeordnete Elemente, die Sie wollten das Ereignis ausgelöst wird, müssen Sie die Versorgung der Richtlinie für diese Elemente auch. Sie könnten dann entweder definieren Sie verschiedene Funktionen, wenn Sie brauchen, zu unterscheiden, welches element wurde angeklickt, oder pass ein weiterer parameter z.B. meinefunktion($event, 'element1')
Ja, ich weiß, wie Sie eine Richtlinie, ich wollte nur wissen, ob dieser Ansatz sollte in der Arbeit auf Kinder-Elemente. Aber ich habe herausgefunden, dass dies funktioniert nur auf dem host. Also danke.

InformationsquelleAutor Googs

import { Directive, ElementRef, OnInit, Output, EventEmitter} from '@angular/core';

    @Directive({
          selector: '[checkClick]'
        })

        export class checkClickDirective implements OnInit {

        @Output() public checkClick = new EventEmitter();

        constructor(private _el: ElementRef) { }

        @HostListener('click', ['$event.target']) public onClick(targetElement) {

            const checkClick = this._el.nativeElement.contains(targetElement);

            (checkClick)?this.checkClick.emit(true):this.checkClick.emit(false);
          }
        }

InformationsquelleAutor Noufal PP

1

Ich denke, der bessere Weg zur globalen listener @hostliterner aber wenn Sie wollen, um den Gegner einige element, das Sie tun können, wie diese
```
<div (event)="onEvent($e)"></div>
```
in Ihrem Winkel-Komponente
```
onEvent($e) { //do something ... }
```
InformationsquelleAutor Rey

Hören Sie auf ein element:

import { Renderer2 } from '@angular/core';
...
constructor(private renderer: Renderer2) {}

//Get this.myElement with document.getElement... or ElementRef 

ngOnInit() {
  //scroll or any other event
  this.renderer.listen(this.myElement, 'scroll', (event) => {
  //Do something with 'event'
  console.log(this.myElement.scrollTop);
});

}

InformationsquelleAutor alex351

-1

Können Sie auch beliebige element ohne @hostlistener und kann fügen Sie die erforderlichen Ereignisse, die durch die folgende Weise

import { AfterViewInit, Component, ElementRef} from '@angular/core';

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  this.elementRef.nativeElement.querySelector('my-element')
                                .addEventListener('click', this.onClick.bind(this));
}

onClick(event) {
  console.log(event);
}

InformationsquelleAutor Zahidul Islam Jamy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.