web-dev-qa-db-fra.com

directive clic en dehors angulaire 6

J'ai mis à niveau mon angulaire de 4 à 6 et, par conséquent, j'ai eu un problème de politique de clics, il a cessé de fonctionner sur tous les composants.

ma directive:

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

@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {

  constructor(private _elementRef : ElementRef) { }

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

  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
      const clickedInside = this._elementRef.nativeElement.contains(targetElement);
      if (!clickedInside) {
          this.clickOutside.emit(null);
      }
  }
}

Mon composant.html qui utilise cette directive:

<div id="sidenav" *ngIf="this.opened" class="sidenav" [ngClass]="getClasses()" [ngStyle]="getStyles()" clickOutside (clickOutside)="closeOutsideSidenav()">
  <header> {{ navTitle }} </header>
  <i *ngIf="this.showCloseButton" class="iconic iconic-x-thin close-icon" (click)="closeSidenav()"></i>
  <ng-content></ng-content>
</div>
<div *ngIf="this.backdrop && this.opened" class="sidenav-backdrop"></div>
angularangular2-directivesangular6
4
André Montório

Vous faites référence à "this" dans votre modèle, ce qui n'est pas nécessaire. J'ai fait un exemple de travail de cette directive:

https://stackblitz.com/edit/angular-piqewb

Et il n'y a aucune raison d'avoir la directive sur la div deux fois. 

<div id="sidenav" *ngIf="opened" class="sidenav" [ngClass]="getClasses()" [ngStyle]="getStyles()" (clickOutside)="closeOutsideSidenav()">
    <header> {{ navTitle }} </header>
    <i *ngIf="showCloseButton" class="iconic iconic-x-thin close-icon" (click)="closeSidenav()"></i>
    <ng-content></ng-content>
</div>

<div *ngIf="backdrop && opened" class="sidenav-backdrop"></div>
5
Pezetter
<div #insideElement>
</div>

import { ViewChild, HostListener  } from '@angular/core';
@ViewChild("insideElement") insideElement;
@HostListener('document:click', ['$event.target'])
public onClick(targetElement) {
    const clickedInside = this.insideElement.nativeElement.contains(targetElement);
    if (!clickedInside) {
        console.log('outside clicked');
    }
}
0
YoungHyeong Ryu