仅在外部单击时调用函数不能按预期工作

Question

在我的角度指令中，单击主机元素时会弹出显示。当弹出窗口打开状态时，如果用户在任何地方点击外部，我需要关闭弹出窗口。为此，我尝试使用以下代码。但不起作用。 this.removeComponent(); 方法总是在调用。

@HostListener("window:mouseup", ["$event"]) clickedOut(event) {
if (event.target.nativeElement === this.hostElement) {
  //when click on host element do nothing!
  return;
}
//when click outside otherthan this.hostElement remove the componenet
this.removeComponent();
}

有人请帮我处理这种情况吗？

Answer 1

这应该可以解决您的问题，因为您正在将一个元素与一个元素数组进行比较，该元素总是错误的，从而给您带来错误。

@HostListener("window:mouseup", ["$event"]) clickedOut(event) {
    if (this.hostElement.nativeElement.contains(event.target)) {
      //when click on host element do nothing!
      return;
    }
    else{
    this.removeComponent();
    }
    //when click outside other than this.hostElement remove the component
    }

Answer 2

应该是

  @HostListener('window:mouseup', ['$event']) clickedOut(event) {

    //you looking for "event.target" into "this.element.nativeElement"

    if (!this.elementRef.nativeElement.contains(event.target)) {
      console.log("outside")
    }
    else
    {
      console.log("inside")
 
    }
  }

注意：如果您不希望传播对元素的点击，请在 HostListener（点击）中使用 event.stopPropagation();

   @HostListener('click', ['$event']) onClick(event) {
    ....
    event.stopPropagation(); //<---this line
  }

或者完全删除，只使用关于window:mouseup的hostListener

stackblitz（仅显示在控制台点击外部和点击内部）

更新用这种方法，你会得到很多“点击外部”作为你有指令的元素

如果我们的 dfirective 是显示一个弹出窗口或类似的，没有问题，因为我们通常没有很多元素。但是想象一下，我们的指令只是设置一个边框——例如——。我们应该采取另一种方法。首先我们可以使用 HostBinding，所以我们的指令只能管理创建一个边框。看到我们将 elementRef 注入为“public”

@Directive({
  selector: '[showpop]'
})
export class ShowPopDirective {
  border: boolean=false;
  constructor( public elementRef: ElementRef ) {}

  @HostBinding('style.border') get _(){return this.border?'1px solid red':null}
  
}

我们可以从外部控制外部

  @ViewChildren(ShowPopDirective) items:QueryList<ShowPopDirective>
  @HostListener('window:mouseup', ['$event']) clickedOut(event) {
    this.items.forEach(x=>{
      x.border=!x.border && x.elementRef.nativeElement.contains(event.target)
    })
  }

新的stackblitz