Html 如何在angular 8中捕获引导下拉关闭事件，单击外部下拉列表

我使用Angular 8和Azia主题（引导4主题）。当我在下拉列表外单击时，我想捕获下拉列表的关闭事件。在下面的代码段中，show类需要有条件地添加以隐藏/显示下拉列表。下面的代码在一个条件下不工作，该条件是由于主题的默认行为而在下拉列表的外部单击。双击需要打开下拉列表。所以我想捕捉css更改下拉列表时的事件

这是我的密码

  <div (click)="isShowDropDown != isShowDropDown" #notification id="noti"
  [ngClass]="isShowDropDown ? 'dropdown az-header-notification cursor-pointer show' : 'dropdown az- 
  header-notification cursor-pointer'">

  // code here to show dropdown content.

  </div>

//这里的代码显示下拉内容。

您可以使用（聚焦输出）或（模糊）事件

当元素失去焦点时，将触发这两个事件

blur

和

focusout

之间的主要区别在于

focusout

冒泡，而blur不冒泡

---

请看一看它使用了focusout。

用angular属性绑定方法而不是[ngClass]解决了这个问题

解决办法是

在HTML中

<div (click)="showNotification()" 
  id="unreadNotificationdropdown" [class]="showNotificationDropdownClass">
   <app-drop-down-content></app-drop-down-content>
</div>

在componet.ts中

  showNotification() {
  if (document.getElementById('unreadNotificationdropdown').className.search('show') 
    === -1 && this.isShowDropDown) {
    this.showNotificationDropdownClass = 'dropdown az-header-notification cursor- 
    pointer show tx-24 ';
  } else {
    this.isShowDropDown = !this.isShowDropDown;
    if (this.isShowDropDown) {
      this.showNotificationDropdownClass = 'dropdown az-header-notification cursor-pointer show tx-24';
    } else {
      this.showNotificationDropdownClass = 'dropdown az-header-notification cursor-pointer tx-24';
      }
    }

  }

---

我尝试了此解决方案，但单击外部时未触发“焦点输出”事件。实际上在我的代码中（参考上面的代码）。下拉内容是从另一个组件加载的。在下拉列表的主分区内。这是否会产生问题，从而无法抓住焦点event@purnimakamble我认为事件已触发，但您必须制作一个事件发射器，通知父对象其子对象失去焦点。模糊和聚焦事件适用于可聚焦元素。对于div，除非设置了tabindex，否则它们将不起作用。

  showNotification() {
  if (document.getElementById('unreadNotificationdropdown').className.search('show') 
    === -1 && this.isShowDropDown) {
    this.showNotificationDropdownClass = 'dropdown az-header-notification cursor- 
    pointer show tx-24 ';
  } else {
    this.isShowDropDown = !this.isShowDropDown;
    if (this.isShowDropDown) {
      this.showNotificationDropdownClass = 'dropdown az-header-notification cursor-pointer show tx-24';
    } else {
      this.showNotificationDropdownClass = 'dropdown az-header-notification cursor-pointer tx-24';
      }
    }

  }