Угловая инкапсуляция и директива click-outside - PullRequest
Новая
       12

Угловая инкапсуляция и директива click-outside

0 голосов
/ 19 сентября 2018

Проблема: Мне нужно добавить способ для привязки и закрытия меню боковой панели, если пользователь щелкнет за пределами этого.

Я создал директиву (Что-то , подобное найденному на этом ), который проверяет, является ли нажатие привязкой вне моего элемента, но когда пользователь щелкает точно по моему удивительному шрифту значку на боковой панели, это считается внешним щелчком, и меню не открывается (директива работает хорошо, я проверяю, нажимая на кнопкуpadding) ...

Я полагаю, это проблема моей директивы, вызванная угловыми инкапсуляциями ...

Мой код: 

<aside [ngClass]="{'open': menuStatus}" (clickOutside)="menuStatus = false">
    <button (click)="menuStatusToggle()">
        <fa-icon [icon]="['fas', 'bars']" *ngIf="!menuStatus"></fa-icon>
        <fa-icon [icon]="['fas', 'times']" *ngIf="menuStatus"></fa-icon>
    </button>
    (Menu Content...)
</aside>

Событие привязки: 

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

    // Variable content always false when click on icon of _elementRef
    const clickedInside = this._elementRef.nativeElement.contains(targetElement);

    if (!clickedInside) {
      this.clickOutside.emit(null);
    }
  }

У кого-нибудь есть предложение?Инкапсуляция действительно проблема?

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Чтобы убедиться, что значок font-awesome не перехватывает событие click, определите следующий стиль в компоненте CSS: 

fa-icon {
  pointer-events: none;
}

С этим атрибутом стиля кнопка получает событие click, котороезатем может быть обработан правильно.

См. этот стек для демонстрации.

Альтернативное решение - обработать событие click на элементе host и остановить распространение.Как следствие, все события щелчка, достигающие документа, находятся за пределами основного элемента: 

@HostListener('click', ['$event'])
public onHostClick(event: Event) {
  event.stopPropagation();
}

@HostListener('document:click', ['$event'])
public onDocumentClick(event: Event) {
  this.clickOutside.emit(null);
}

См. этот стек для демонстрации.

0 голосов
/ 19 сентября 2018

Вам нужно исправить параметр в функции onClick, он должен выглядеть следующим образом: 

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

  const clickedInside = this._elementRef.nativeElement.contains(event.target);

  if (!clickedInside) {
    this.clickOutside.emit(null);
  }
}
...