Angular 5-當用戶在目標元素之外單擊時如何觸發事件

Question

我需要能夠在用戶單擊外部目標元素時進行注冊。 為此，我創建了一個自定義屬性指令，如下所示。

ClickOutsideTargets指令

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

@Directive({
  selector: '[clickOutsideTargets]',
})
export class ClickOutsideTargetsDirective {

    @Input()
    public targets : HTMLElement[] = [];


    @Output() 
    clickOutsideTargets = new EventEmitter();

    constructor(){

    }


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

     if(!targetElement){
        return;
    }

    for(var i = 0, len = this.targets.length; i < len; i++){
        if(this.targets[i].contains(targetElement)){
            return;
        }
    }

    this.clickOutsideTargets.emit(null);

  }

}

“目標”數組指定用戶可以在不觸發事件的情況下單擊的元素。 每當用戶在這些元素之外單擊時，都會發出一個事件。

我希望能夠使用干凈且方便的以下語法將目標數組傳遞給指令作為輸入。 每個目標均作為模板變量（#variable）給出。

<button #buttonRef class="btn btn-primary" (click) = "activate()" (clickOutsideTargets) = "deactivate()" [targets] = "[buttonRef, containerRef]"> </button>

這種方法的問題

但是，這在以下情況下不起作用：

• 目標元素之一存在於子組件的模板中。 除非有一種方法可以從父組件的模板訪問子模板的變量。

• 目標元素之一是動態創建的，例如通過NgFor。

有辦法解決這些問題嗎？ 或者理想情況下，有沒有我沒有考慮的更好的解決方案/策略。

（獲得該功能的一個非常混亂的解決方案是創建一個新的模板變量來表示指令（使用指令的裝飾器中的exportAs），使用ViewChild訪問父組件中的指令，使用ViewChild / ViewChildren訪問目標元素並手動設置指令的目標數組指向必要的元素。）這打破了精益組件的原理。

Answer 1

您可能想嘗試一下

在您的組件中

@ViewChild('myTarget') myTarget;

@HostListener('document:click', ['$event.target'])
    onClick(targetElement) {
        const clickedInside = this.myTarget.nativeElement.contains(targetElement);
        if (!clickedInside) {
            //the click was made outside of this element
        }
    }

在你的HTML

<div #myTarget>
</div>