web-dev-qa-db-fra.com

Angular2, HostListener, comment cibler un élément? puis-je cibler en fonction de la classe?

Dans Angular2, comment puis-je cibler un élément dans le décorateur HostListener?

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

Les deux premiers travaux. Toute autre chose que j'ai essayée soulève un EXCEPTION: Unsupported event target undefined for event dragstart

Alors, puis-je l'implémenter à un élément ciblé? Comment?

angulareventsdomtypescriptaddeventlistener
18
GWorking

@HostListener() ne prend en charge que window, document et body en tant que cibles d'événements globales, sinon elle ne prend en charge que l'élément hôte Host.

24
Günter Zöchbauer
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);
          }
        }
2
Noufal PP

Je pense que le meilleur moyen pour l'auditeur global est @hostliterner, mais si vous voulez cibler un élément, vous pouvez le faire comme ceci 

<div (event)="onEvent($e)"></div>

dans votre composant angulaire

onEvent($e) { //do something ... }
2
Rey

Écoutez sur un élément:

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

}

0
alex351