Angular 多个DOM的角度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连接到模糊事件的按钮？

在这些情况下，我会制作一个指令，它们整洁且可重复使用，通过谷歌搜索“click outside directive angular”，您可以找到一些答案。在这里，虽然您需要关注两个元素，因此指令不会那么整洁，但是下面的工作是有效的

为您的按钮指定一些类名，例如

openbutton

。我们将在指令中使用这一点。因此，按如下所示制作一个指令（并在声明数组中标记）：

import{Directive，ElementRef，Output，EventEmitter，HostListener}来自“@angular/core”；
@指示({
选择器：“[isOutside]”
})
导出类isoutside指令{
构造函数（私有elementRef:elementRef）{}
@输出（）
public isOutside=new EventEmitter（）；
//关注点击事件
@HostListener（'文档：单击'，['$event.target']））
公共onClick（targetElement）{
if（this.elementRef）{
//查看单击的元素是目标元素还是按钮
const clickedInside=this.elementRef.nativeElement.contains（targetElement）|
包含（'open-button'）；
如果（！clickedInside）{
this.isOutside.emit（true）；
}
}
}
}

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

---

您能否就您面临的问题给我们更多的澄清，我们不明白您在说什么！！！也许stackblitz代码会helpful@JavascriptLover-谢谢你的回答。我忘了把我的代码标记为代码。