javascript - 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);

  }

}

'targets' 数组指定用户可以在不触发事件的情况下单击的元素。每当用户在这些元素之外单击时，都会发出一个事件。

我希望能够使用以下简洁方便的语法将目标数组作为输入传递给指令。每个目标都作为模板变量 (#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>