多个 DOMS 的 Angular 6 模糊事件

Question

我有一个按钮，应该显示一个单独的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 连接到模糊事件的按钮？

Answer 1

在这些情况下，我会制定一个指令，它们是整洁且可重用的，通过谷歌搜索"单击外部指令角度"，您可以找到一些答案。在这里，虽然您需要注意两个元素，因此指令不会那么整洁，但以下内容有效。

为您的按钮指定一些类名，例如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>

演示：堆栈闪电战