директивный щелчок снаружи угловой 6 - PullRequest
Новая
       29

директивный щелчок снаружи угловой 6

0 голосов
/ 25 мая 2018

Я обновил свой Angular с 4 до 6, и, следовательно, возникла проблема с моей политикой отключения, он перестал работать на всех компонентах.

моя директива: 

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

Mycomponent.html, который использует эту директиву: 

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

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

Запустите внутри NgZone.

Пример: 

export class AppComponent {
  opened: boolean = false;

  constructor(private ngZone: NgZone) {
  }

  closeOutsideSidenav(e) {
    this.ngZone.run(() => {
      this.opened = !this.opened;
    })
  }
}

Я добавил свой код в stackblitz.https://stackblitz.com/edit/angular-gyhtym (нажмите за пределами поля «Выделите меня!»)

0 голосов
/ 28 января 2019

просмотр: 

<div #insideElement></div>

компонент: 

export class SomeClass {
  @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 голосов
/ 25 мая 2018

Вы ссылаетесь "this" в вашем шаблоне, что не является необходимым.Я сделал рабочий пример этой директивы:

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

И нет никакой причины дважды указывать директиву в div.

<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>
...