如何关闭ngbootstrap中其他打开的下拉菜单

Question

我在这样的多个元素中使用ngbdropdown

<div *ngFor="let item of items" class="most parent div">
<div (click)="doSomething()">
   <div ngbDropdown [autoClose]="'outside'">
        <button ngbDropdownToggle (click)="$event.stopPropagation();">
            Toggle dropdown 1
         </button>
        <div ngbDropdownMenu>
        <button ngbDropdownItem>Action - 1</button>
   </div>
</div>
<div (click)="doSomething()">
   <div ngbDropdown [autoClose]="'outside'">>
        <button ngbDropdownToggle (click)="$event.stopPropagation();">
            Toggle dropdown 2
        </button>
        <div ngbDropdownMenu>
        <button ngbDropdownItem>Action - 1</button>
   </div>
</div>
</div>

基本上某些函数是从下拉列表的父元素调用的。 为了防止调用父元素（单击），我正在使用$event.stopPropagation()。 我已经使用ngb-dropdown的autoclose属性在用户点击其区域外时关闭它。

当我打开第二次下拉时，第一次没有关闭。

有没有办法关闭任何其他打开的下拉列表而不调用其父亲的click事件？在棱角分明？使用ngbDropDown？

Answer 1

这个例子可能对你有帮助

<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" ngbDropdownToggle>{{dropdownMenuName}}</button>
  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" (click)="ChangeSortOrder(sortOrder)">
      {{sortOrder}}
    </button>
  </div>
</div>


<div ngbDropdown class="d-inline-block">
  <button class="btn btn-outline-primary" ngbDropdownToggle>{{dropdownMenuName}}</button>
  <div class="dropdown-menu" aria-labelledby="sortMenu">
    <button class="dropdown-item" *ngFor="let sortOrder of sortOrders" (click)="ChangeSortOrder(sortOrder)">
      {{sortOrder}}
    </button>
  </div>
</div>

在component.ts

  sortOrders: string[] = ['Year', 'Title', 'Author'];
  dropdownMenuName: string = 'Sort by...';

  ChangeSortOrder(newSortOrder: string) {
    this.dropdownMenuName = newSortOrder;
  }