Angular 9 + Bootstrap 4.3.1中Popover内按钮点击事件无法触发的解决方法

这个问题我之前帮不少开发者处理过——本质是Bootstrap Popover会把你的内容从组件原始DOM结构里抽出来，挂载到body标签下，这就导致那些按钮脱离了Angular组件的上下文环境，原本的(click)绑定自然就失效了，Angular根本追踪不到这些“游离”的元素事件。

下面给你两种可行的解决方案，你可以根据自己的项目情况选择：

方案一：用Angular Renderer2手动绑定事件（适配原生Bootstrap+jQuery） #

这种方法不需要改动你的技术栈，只需要在popover渲染完成后，手动给按钮绑定组件上下文的事件：

1. 首先在组件类里注入Renderer2和ElementRef：

import { Component, OnInit, Renderer2, ElementRef } from '@angular/core';

2. 修改ngOnInit方法，利用Bootstrap的shown.bs.popover事件（popover完全显示后触发），给动态生成的按钮绑定点击事件：

ngOnInit(): void {
  const popoverContent = $('#fromFloor-content').html();
  $('#fromFloor[data-toggle="popover"]').popover({
    html: true,
    sanitize: false,
    trigger: 'focus',
    container: 'body',
    content: popoverContent,
  });

  // 监听popover显示完成事件，绑定按钮点击
  $('#fromFloor[data-toggle="popover"]').on('shown.bs.popover', () => {
    // 获取popover内的所有按钮
    const popoverButtons = document.querySelectorAll('.popover .btn-link');
    popoverButtons.forEach(btn => {
      // 用Renderer2绑定点击事件，确保在组件上下文执行
      this.renderer.listen(btn, 'click', (event) => {
        const buttonContent = (event.target as HTMLElement).textContent?.trim();
        this.test(buttonContent);
        // 可选：点击后关闭popover
        $('#fromFloor[data-toggle="popover"]').popover('hide');
      });
    });
  });
}

test(buttonContent:string) {
  console.log(buttonContent);
}

这样一来，按钮的点击事件就会回到Angular组件的上下文里，自然能触发你的test函数了。

方案二：改用ng-bootstrap（更贴合Angular生态） #

如果不想手动操作DOM，推荐使用官方维护的ng-bootstrap库——它完全适配Angular，不需要依赖jQuery，popover内容直接作为Angular模板的一部分，事件绑定天然有效：

1. 安装依赖：

npm install @ng-bootstrap/ng-bootstrap bootstrap@4.3.1

2. 在app.module.ts里导入NgbModule：

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

@NgModule({
  imports: [
    // 其他导入...
    NgbModule
  ]
})
export class AppModule { }

3. 重写组件模板，用ng-bootstrap的popover语法：

<!-- 触发popover的按钮 -->
<button 
  type="button" 
  class="btn"
  ngbPopover 
  popoverTitle="选择楼层"
  [popoverContent]="floorContent"
  triggers="focus"
>
  选择楼层
</button>

<!-- popover内容模板 -->
<ng-template #floorContent>
  <div class='container rtl pr-3'>
    <input name="test" ngModel type="checkbox" >
    <div class='row'>
      <button class='col p-2 btn btn-link' style='text-decoration: none' (click)="test('all')">all</button>
    </div>
    <div class='row'>
      <button class='col p-2 btn btn-link' style='text-decoration: none' (click)="test('0')">0</button>
    </div>
    <div class='row'>
      <button class='col p-2 btn btn-link' style='text-decoration: none' (click)="test('1')">1</button>
    </div>
    <div class='row'>
      <button class='col p-2 btn btn-link' style='text-decoration: none' (click)="test('2')">2</button>
    </div>
  </div>
</ng-template>

4. TS代码只需要保留你的test函数即可，不需要再写jQuery的popover初始化：

test(buttonContent:string) {
  console.log(buttonContent);
}

这种方法完全遵循Angular的组件化思路，代码更简洁，也不容易出现DOM相关的问题，长期来看更适合Angular项目。

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