javascript - Angular : Detect click event inside a div with ngFor inside

Question

我正在开发一个带有很多下拉菜单的应用程序，我希望每当在该下拉菜单之外发生单击时都能够关闭下拉菜单。

我找到了一些很好的解决方案，但它们都没有处理其中有 ngFor 的情况，当我在 ngFor 中记录点击事件目标时，我得到了该元素，但这个元素没有任何父元素。我也无法用“查找”或“包含”检测到它。

有人有解决方案来检测该目标是否是下拉列表的一部分吗？

指令

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(current);返回两行内容

<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