Угловое: Обнаружение события щелчка внутри div с ngFor внутри

Question

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

Я нашел несколько хороших решений, но ни один из них не обрабатывал случай наличия ngFor в нем, когда я регистрирую цель события click в ngFor, я получаю элемент, но у этого нет родителя. Я не могу обнаружить его с помощью «find» или «contains».

У кого-нибудь есть решение определить, является ли эта цель частью раскрывающегося списка?

директива

import { 
Directive, 
ElementRef, 
EventEmitter, 
Input, 
OnInit, 
Output, 
SimpleChange 
} from '@angular/core'; 

@Directive({selector: '[clickOutside]'}) 
export class ClickOutside implements OnInit { 
@Output() clickOutside:EventEmitter<Event> = new EventEmitter<Event>(); 

constructor(private _el:ElementRef) { 
    this.onClickBody = this.onClickBody.bind(this); 
} 

ngOnInit() { 
    document.body.addEventListener('click', this.onClickBody); 
} 

private onClickBody(e:Event) { 
    if (!this.isClickInElement(e)) { 
     this.clickOutside.emit(e); 
    } 
} 

private isClickInElement(e:any):boolean { 
    var current = e.target; 
    do { 
     console.log(current); 
     if (current === this._el.nativeElement) { 
      return(true); 
     } 
     current = current.parentNode; 
    } while (current); 
    return false; 
} 
} 

Пример где я назвать директиву

<div (clickOutside)="onClickedOutside($event)"> 
      <ul> 
       <li *ngFor="let item of itemsList" (click)="selectItem(item)"> 
        <span class="item"> 
        {{item.name}} 
        </span> 
       </li> 
      </ul> 
     </div> 

при нажатии на item.name, console.log (ток); возвращает мне две строки

<span>Item</span> 


<li> 
    <span>Item</span> 
</li> 

Answer 1

@Directive({selector: '[clickOutside]'}) 
export class ClickOutside implements OnInit { 
    @Output() clickOutside:EventEmitter<Event> = new EventEmitter<Event>(); 

    constructor(private _eref: ElementRef) { } 

    @HostListener('window:click') 
    private onClickBody(e:Event) { 
    if (!this.isClickInElement(e)) { 
     this.clickOutside.emit(e); 
    } 
    } 

    private isClickInElement(e:any):boolean { 
    return this._eref.nativeElement.contains(event.target); 
    } 
} 

Смотрите также https://stackoverflow.com/a/35713421/217408

Answer 2

Это решение работает с Chrome, но, к сожалению, не с IE. Я все еще ищу другой способ сделать это

private isClickInElement(e:any):boolean { 
    var current = e.target; 
    if(current == this._el.nativeElement) { 
     return true; 
    } 
    for(let parentKey in e.path) { 
     if(e.path[parentKey] == this._el.nativeElement) { 
      return true; 
     } 
    } 

    return false; 
}