有角度。如何定義外部點擊，排除子部件？

有用於確定組件

@HostListener('document:click', ['$event', '$event.target']) 
public onClick($event, targetElement) { 
    const isClickedInside = this._elementRef.nativeElement.contains(targetElement); 
    if (!isClickedInside) { 
     this.onClickOutsideEvent.emit($event); 
    } 
}

爲什麼點擊定義之外，如果點擊境內關外的點擊代碼，但嵌套組件？

來源

2017-10-04 front

當您將其設置爲您希望監視的元素的包裝div上的偵聽器時，上述代碼的邏輯工作。該div應該是屏幕大小，並將接收文檔上的所有點擊事件。當點擊不在該div內時，它就在您正在監視的元素內部，通過消除邏輯。我會把它完成以下：

@HostListener('document:click', ['$event', '$event.target']) 
    onClick(event: MouseEvent, targetElement: HTMLElement): void { 
     if (!targetElement) { 
      return; 
     } 

     const clickedInside = this.elementRef.nativeElement.contains(targetElement); 
     if (!clickedInside) { 
      this.clickOutside.emit(event); 
     } 
    }

demo

來源

2017-10-04 07:47:36 Vega

有角度。如何定義外部點擊，排除子部件？

回答

相關問題