web-dev-qa-db-fra.com

Détecter le clic en dehors de Angular composant

Comment détecter les clics extérieur un composant dans Angular?

htmleventsangulartypescript
70
AMagyar
import { Component, ElementRef, HostListener, Input } from '@angular/core';

@Component({
  selector: 'selector',
  template: `
    <div>
      {{text}}
    </div>
  `
})
export class AnotherComponent {
  public text: String;

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if(this.eRef.nativeElement.contains(event.target)) {
      this.text = "clicked inside";
    } else {
      this.text = "clicked outside";
    }
  }

  constructor(private eRef: ElementRef) {
    this.text = 'no clicks yet';
  }
}

n exemple de travail - cliquez ici

128
AMagyar

Une alternative à la réponse d'AMagyar. Cette version fonctionne lorsque vous cliquez sur un élément qui est supprimé du DOM avec un ngIf.

http://plnkr.co/edit/4mrn4GjM95uvSbQtxrAS?p=preview

  private wasInside = false;
  
  @HostListener('click')
  clickInside() {
    this.text = "clicked inside";
    this.wasInside = true;
  }
  
  @HostListener('document:click')
  clickout() {
    if (!this.wasInside) {
      this.text = "clicked outside";
    }
    this.wasInside = false;
  }
23
J. Frankenstein

Les réponses mentionnées ci-dessus sont correctes, mais que se passe-t-il si vous effectuez un processus complexe après avoir perdu le focus du composant concerné? Pour cela, je suis arrivé avec une solution avec deux indicateurs dans lesquels le processus d’événement de focalisation n’aurait lieu que lorsqu’on perdrait le focus du composant concerné uniquement.

isFocusInsideComponent = false;
isComponentClicked = false;

@HostListener('click')
clickInside() {
    this.isFocusInsideComponent = true;
    this.isComponentClicked = true;
}

@HostListener('document:click')
clickout() {
    if (!this.isFocusInsideComponent && this.isComponentClicked) {
        // do the heavy process

        this.isComponentClicked = false;
    }
    this.isFocusInsideComponent = false;
}

J'espère que cela vous aidera. Corrigez-moi si j'ai manqué quelque chose.

4
Rishanthakumar

Vous pouvez utiliser la méthode useclickOutside () à partir de https://www.npmjs.com/package/ng-click-outside package

1
James Bond