Блог

Я использую 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>
  

В основном некоторая функция вызывается из родительского элемента выпадающего списка.
Чтобы предотвратить вызов родительского элемента (click), я использую $event.stopPropagation() .
Я использовал свойство autoclose ngb-dropdown, чтобы закрыть его, когда пользователь нажимает за пределами его области.

тем не менее, когда я открываю второй выпадающий список, 1-й не закрывается.

есть ли какой-либо способ закрыть любой другой открытый выпадающий список без вызова click события его родителя? в angular? используя ngbDropDown?

Этот пример может помочь вам

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