首页 文章

Angular 5 - 当用户点击目标元素外部时如何触发事件

提问于
浏览 次
1

我需要能够在用户点击外部目标元素时进行注册 . 为此，我创建了一个自定义属性指令，如下所示 .

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访问目标元素并手动设置指令的目标数组到必要的元素 . ）这打破了精益组件的原则 .

javascript angular angular2-directives

1 回答

  • 3

    你可能想试试这个

    在您的组件中

    @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>
    回复于

相关问题