Angular 18 中如何通过点击显示并关闭 ngx-bootstrap 提示框？

2026-11-04数据小陈

结论

如果信息框的内容由 ng-template 提供，可以用 ngx-bootstrap 的 popover 实现弹出提示。将 triggers 设为 click，并在触发按钮上声明 bs-popover 模板引用。模板中的关闭按钮调用该引用的 hide() 方法。

示例

<ng-template #infoTemplate>
  <div class="d-flex align-items-start gap-2">
    <span>这里填写信息提示内容。</span>
    <button
      type="button"
      class="btn-close"
      aria-label="Close"
      (click)="infoPopover.hide()">
    </button>
  </div>
</ng-template>

<button
  type="button"
  class="btn btn-info"
  [popover]="infoTemplate"
  triggers="click"
  #infoPopover="bs-popover">
  查看信息
</button>

点击“查看信息”会打开 popover，点击其中的关闭按钮则调用 hide() 将其关闭。ng-template 提供提示框内容，ngx-bootstrap 负责显示和隐藏，因此关闭按钮需要调用 popover 指令的方法。

注意事项

如果实际使用的是 tooltip 指令，模板引用应导出为 bs-tooltip，关闭时调用对应引用的 hide()。确认模板引用名称与使用的指令一致，并检查项目已按 ngx-bootstrap 18.1.3 的用法导入相关模块或 standalone 指令。