如何在ng-bootstrap弹出框关闭时调用filterName()函数？

你可以利用ng-bootstrap Popover提供的hidden输出事件实现需求——这个事件会在popover完全关闭时触发，不管是点击外部、点击触发元素还是其他关闭方式。

直接绑定关闭事件 #

只需要给popover触发元素添加(hidden)="filterName()"即可，这样每次popover关闭时都会自动调用filterName()：

<ng-template #namePopContent>
   <input type="text" id="name" [(ngModel)]="name"/>
   <!-- 可保留该图标，用户仍能选择点击它直接筛选并关闭 -->
   <i class="bi bi-check" (click)="filterName()"></i>
</ng-template>

<tr>
   <th class="th" scope="col">
      Name
      <i [autoClose]="'outside'" placement="bottom" [ngbPopover]="namePopContent" (hidden)="filterName()"></i>
   </th>
</tr>

仅在点击外部关闭时触发（可选） #

如果需要只在点击外部关闭popover时才调用筛选函数，可以通过hidden事件的参数NgbPopoverCloseEvent判断关闭原因：

首先在组件类中导入事件类型：

import { NgbPopoverCloseEvent } from '@ng-bootstrap/ng-bootstrap';

修改模板中的事件绑定：

<i [autoClose]="'outside'" placement="bottom" [ngbPopover]="namePopContent" (hidden)="handlePopoverClose($event)"></i>

最后在组件类中添加处理函数：

handlePopoverClose(event: NgbPopoverCloseEvent) {
  // 仅当关闭原因是点击外部时执行筛选
  if (event.reason === 'outside') {
    this.filterName();
  }
}

这样既能精准控制只有点击外部关闭时自动执行筛选，也保留了原有的图标点击功能。

内容的提问来源于stack exchange，提问作者user6781