Angular中Bootstrap Table动态注入HTML绑定组件函数问题

方法1：挂载组件方法到全局window（快速实现） #

类似AngularJS时期的思路，通过全局对象桥接静态HTML和组件方法，注意组件销毁时清理全局变量避免内存泄漏。

1. 在组件类中将方法绑定到window并固定this指向：

export class YourComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    // 把组件方法挂载到全局window，绑定this确保调用上下文正确
    (window as any).tableBtnClick = this.myFunction.bind(this);
  }

  myFunction(index: number): void {
    alert(`点击了行索引：${index}`);
  }

  ngOnDestroy(): void {
    // 组件销毁时删除全局方法，防止内存泄漏
    delete (window as any).tableBtnClick;
  }
}

2. 在Bootstrap Table的formatter中生成带onClick的按钮：

const formatButton = function(row: any, index: number) {
  return `<button onClick="tableBtnClick(${index})">Alert ${index}</button>`;
};

方法2：利用Bootstrap Table的onClickCell事件（更符合Angular规范） #

避免全局污染，通过表格自带的单元格点击事件来处理按钮触发逻辑。

1. formatter只生成带标识的静态按钮：

const formatButton = function(row: any, index: number) {
  // 用data属性存储行索引
  return `<button class="table-action-btn" data-row-index="${index}">Alert ${index}</button>`;
};

2. 初始化表格时绑定onClickCell回调：

// 确保回调用箭头函数，保留组件this上下文
jQuery("#table-id").bootstrapTable({
  columns: table_columns,
  data: tableData,
  onClickCell: (field: string, value: any, row: any, $element: JQuery) => {
    const targetBtn = $element.find('.table-action-btn');
    if (targetBtn.length) {
      const rowIndex = parseInt(targetBtn.data('row-index'), 10);
      this.myFunction(rowIndex);
    }
  }
});

方法3：使用Angular Renderer2手动绑定事件（最Angular化） #

通过Angular的Renderer API直接操作DOM绑定事件，完全遵循Angular的变更检测机制。

1. 先注入Renderer2：

import { Renderer2 } from '@angular/core';

export class YourComponent {
  constructor(private renderer: Renderer2) {}
}

2. formatter生成带唯一ID的按钮：

const formatButton = function(row: any, index: number) {
  return `<button id="table-btn-${index}">Alert ${index}</button>`;
};

3. 表格渲染完成后，遍历按钮绑定点击事件：

bindTableButtonEvents(): void {
  const tableElement = document.getElementById('table-id');
  if (!tableElement) return;

  const buttons = tableElement.querySelectorAll('[id^="table-btn-"]');
  buttons.forEach(btn => {
    const index = parseInt(btn.id.split('-')[2], 10);
    this.renderer.listen(btn, 'click', () => {
      this.myFunction(index);
    });
  });
}

// 表格初始化完成后调用此方法，比如在ngAfterViewInit或表格的onLoadSuccess回调中
ngAfterViewInit(): void {
  this.bindTableButtonEvents();
}

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