时间戳

首页 > 解决方案 > 多个DOMS的Angular 6模糊事件

angular - 多个DOMS的Angular 6模糊事件

问题描述

我有一个按钮，应该显示一个单独的 div。如果我单击除我的 div 之外的任何其他内容，则该 div 应该消失。我试图用模糊来做到这一点，但如果我点击按钮以外的任何东西（如果我点击我的 div），div 就会消失。

<button mat-button (click)="open=true;" (blur)="open=false;"></button>
<div *ngIf="open">content</div>

我想要的是以下内容：

1）点击按钮 - > div出现

2）单击div内的元素（例如输入）并与之交互

3）单击其他任何内容-> div 消失

在其他页面上，有些人提到使用 tabindex="0" 但我不知道如何使用它。是否可以将 div 连接到按钮以进行模糊事件？

标签： angularblur

解决方案

在这些情况下，我会制定一个指令，它们整洁且可重复使用，通过谷歌搜索“点击外部指令角度”，您可以找到一些答案。在这里，虽然您需要注意两个元素，所以指令不会那么整洁，但以下工作。

给你的按钮一些类名，例如open-button。我们将在指令中使用它。因此，如下制作指令（并在您的声明数组中标记）：

import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({
  selector: '[isOutside]'
})
export class IsOutsideDirective {
  constructor(private elementRef: ElementRef) { }

  @Output()
  public isOutside = new EventEmitter();

  // watch for click events
  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    if (this.elementRef) {
      // see if clicked element is the target element OR the button
      const clickedInside = this.elementRef.nativeElement.contains(targetElement) || 
                            targetElement.classList.contains('open-button');
      if (!clickedInside) {
        this.isOutside.emit(true);
      }
    }
  }
}

然后在要隐藏/显示的 div 中使用它：

<div *ngIf="open" (isOutside)="hide($event)" ....

hide()然后将设置open为false, 因为isOutside只有在这两个元素之外单击时才会发出：

hide(event) {
  this.open = false;
}

您的按钮也会切换open：

<button class="open-button" (click)="open = true">Show div</button>

演示：StackBlitz

推荐阅读