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>