Внешний пожарный сигнал по неправильному элементу Angular 6 - PullRequest
Новая
       27

Внешний пожарный сигнал по неправильному элементу Angular 6

0 голосов
/ 30 апреля 2019

Я создал директиву для отлова внешних нажатий элемента с использованием Angular6, как показано ниже. 

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

@Directive({
  selector: '[appOutsideclick]'
})
export class OutsideclickDirective {
  @Output() outsideclick = new EventEmitter();
  constructor(public eRef: ElementRef) { }
  @HostListener('document:click', ['$event'])
  clickout(event) {
    if (this.eRef.nativeElement.contains(event.target) === false) {
      this.outsideclick.emit(event);
    }
  }
}

Он работает хорошо, за исключением случаев, когда внутри контейнера есть элемент, который скрыт с помощью *ngIf, и если мы щелкнем, когда он отобразится, вызовет событие. 

    <div appOutsideclick (outsideclick)="someFunction1()">
      <span *ngIf="showMe" click="someFunction2()">This element shown after ng init based on a condition </span> 
This text is alwaise shown
    </div>

Если щелкнуть элемент span, он запускает событие outsideclick. Как можно решить эту проблему?

Примечание: Я знаю, что в этом примере он может работать с использованием [hidden]="!showMe", но это всего лишь пример для простого понимания проблемы. Мой HTML сложный и содержит компоненты из модуля узла, поэтому я не могу применить hidden everywere

1 Ответ

0 голосов
/ 30 апреля 2019

Действительно не идеально, но должно работать. Вы можете использовать идентификатор или класс, а не tagName для фильтрации элемента. 

@HostListener('document:click', ['$event'])
  clickout(event) {
    if (
      this.eRef.nativeElement.contains(event.target) === false
      && event.target.tagName !== 'SPAN'
    ) {
      this.outsideclick.emit(event);
    }
  }
...