在ng-bootstrap中有一个“属性”“autoclose”，你可以给予值“outside”并手动关闭所有其他按钮中的菜单。

<div
  class="d-inline-block"
  ngbDropdown
  #menu="ngbDropdown"
  [autoClose]="'outside'"
>
  <button
    type="button"
    class="btn btn-outline-primary me-2"
    id="dropdownManual"
    ngbDropdownAnchor
    (focus)="menu.open()"
  >
    Toggle dropdown
  </button>
  <div ngbDropdownMenu aria-labelledby="dropdownManual">
    <button ngbDropdownItem (click)="menu.close()">Action - 1</button>
    <div ngbDropdown #submenu="ngbDropdown" placement="right-top">
      <button ngbDropdownItem ngbDropdownAnchor (click)="submenu.toggle()">
        Another Action
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownManual">
        <button ngbDropdownItem (click)="menu.close()">Action - 1 - 1</button>
        <button ngbDropdownItem (click)="menu.close()">Action - 1 - 2</button>
      </div>
    </div>
    <button ngbDropdownItem (click)="menu.close()">
      Something else is here
    </button>
  </div>
</div>

参见stackblitz
当我们在Angular中使用bootstrap时，我们需要添加bootstrap和@types/bootstrap

npm install bootstrap@5.2.3
npm install @types/bootstrap@5.2.3

然后我们可以从bootstrap导入下拉列表

import { Dropdown } from 'bootstrap';

我们可以有一个这样的.html（请参阅模板引用变量“#menu”）和重要不要忘记我们的菜单中的属性data-bs-toggle="dropdown"。
在主菜单中，我们添加了data-bs-auto-close="outside"，因此只有在单击外部时才关闭

<div class="container">
    <!-- Content here -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown" >
            <a #menu class="nav-link dropdown-toggle" data-bs-toggle="dropdown"  data-toggle="dropdown" role="button" aria-haspopup="true" 
            data-bs-auto-close="outside" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <div class="dropdown-item" >Nested Link1</div>
                <div class="dropdown-item" >Nested Link1</div>
                <div class="dropdown-item drowpdown dropend">
                  <div #menu class="dropdown-toggle w-100" data-bs-toggle="dropdown" >Nested Link1</div>
                  <ul class="dropdown-menu">
                    <li class="dropdown-item" >Nested Link1</li>
                    <li class="dropdown-item" >Nested Link1</li>
                  </ul>
                </div>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
  </div>

现在，我们使用viewChild获取“菜单”，并在ngAtferViewInit中存储下拉列表

menus: Dropdown[]; //<--here store ours menus

  @ViewChildren('menu') elements: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.menus = this.elements
      .toArray()
      .map((x) => new Dropdown(x.nativeElement));
  }

最后我们写一个函数close

close(target: any) {
    if (!target.classList.contains('dropdown-toggle') )
      this.menus.forEach((x) => x.hide());
  }

然后加上as .css之类的

.dropdown-item.drowpdown.dropend
{
  padding-left:0;
  padding-right:0;
}
.dropdown-item.drowpdown.dropend >div
{
  padding-left:1rem;
  padding-right:1rem;

}

以使具有子菜单的div具有全宽
现在只需向h <li class="nav-item dropdown"添加对函数的调用

<li class="nav-item dropdown" (mouseup)="close($event.target)">
   ...
 </li>

参见stackblitz