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

  }

}

＆＃39;目标＆＃39; array指定用户可以单击而不触发事件的元素。每当用户点击这些元素外，就会发出一个事件。

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

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

ClickOutsideTargets指令

此方法的问题

1 个答案: