如何在下拉菜单的外部单击中捕获角度8中的引导程序下拉关闭事件

Question

我正在将Angular 8与Azia主题（bootstrap 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>

Answer 1

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

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

blur和focusout之间的主要区别是focusout起泡而模糊不起泡。

请查看使用聚焦的stackblitz。

Answer 2

用角度属性绑定方法代替了[ngClass]解决了这个问题。

解决方案是，

使用HTML。

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

在类中声明的变量。

  isShowDropDown: boolean =false;
  this.showNotificationDropdownClass:string = 'dropdown az-header-notification cursor-pointer tx-24';

在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';
      }
    }

  }