Angular 2/4/5中通过JS添加动态HTML并绑定事件的方法

这个问题我之前也碰到过，核心原因是Angular的事件绑定（比如(click)）是基于模板编译的——你用jQuery DataTables直接往DOM里插的HTML，Angular压根没“认出”这些元素，所以自带的绑定语法失效；而onclick里直接写myClassFunction()的话，这个函数是你组件类里的方法，不在全局作用域，浏览器自然找不到它。

下面给你几个靠谱的解决方案，按推荐程度排序：

方案一：用Angular的Renderer2手动绑定事件（最推荐） #

Angular官方推荐用Renderer2来操作DOM，避免直接用原生JS或jQuery操作带来的兼容性和生命周期问题，还能正确绑定组件类里的方法。

实现步骤： #

1. 在组件中注入Renderer2和ElementRef；
2. 在DataTables的drawCallback回调（数据加载/渲染完成后触发）里，找到新增的按钮元素；
3. 用Renderer2.listen()绑定点击事件，通过箭头函数保留组件实例的this指向。

代码示例： #

import { Component, Renderer2, ElementRef, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';
import 'datatables.net';

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css']
})
export class MyTableComponent implements AfterViewInit {

  constructor(private renderer: Renderer2, private el: ElementRef) { }

  ngAfterViewInit(): void {
    // 初始化DataTables
    $('#myTable').DataTable({
      ajax: {
        url: '你的数据接口地址',
        dataSrc: ''
      },
      columns: [
        // 其他列配置...
        { 
          data: null,
          render: () => '<button class="action-btn">Click!</button>'
        }
      ],
      // 每次表格渲染完成后执行
      drawCallback: () => {
        // 获取所有动态生成的按钮
        const buttons = this.el.nativeElement.querySelectorAll('.action-btn');
        buttons.forEach(btn => {
          // 绑定点击事件，箭头函数确保this指向组件实例
          this.renderer.listen(btn, 'click', () => {
            this.myClassFunction();
          });
        });
      }
    });
  }

  myClassFunction() {
    console.log('按钮成功触发组件方法！');
    // 这里写你的业务逻辑
  }
}

方案二：利用DataTables的rowCallback绑定事件（贴合插件用法） #

如果你的按钮是每行都有的，用DataTables自带的rowCallback回调更高效，它会在每行渲染完成后触发，还能直接拿到当前行的数据。

代码示例： #

ngAfterViewInit(): void {
  $('#myTable').DataTable({
    // 其他配置...
    columns: [
      // 其他列配置...
      { 
        data: null,
        render: () => '<button class="action-btn">Click!</button>'
      }
    ],
    // 每行渲染完成后执行
    rowCallback: (row, rowData) => {
      // 找到当前行的按钮
      const btn = $(row).find('.action-btn');
      btn.on('click', () => {
        this.myClassFunction();
        // 还能直接用rowData拿到当前行的数据，比如：
        // this.myClassFunction(rowData);
      });
    }
  });
}

方案三：临时挂载方法到全局window（不推荐，仅应急） #

如果赶时间想快速验证，可以把组件的方法挂载到全局window对象上，这样onclick就能找到它，但这种方式会污染全局作用域，组件销毁时一定要记得清理，避免内存泄漏。

代码示例： #

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

@Component({
  // 组件配置...
})
export class MyTableComponent implements OnInit, OnDestroy {

  ngOnInit(): void {
    // 将组件方法挂载到全局window
    (window as any).myClassFunction = () => this.myClassFunction();
  }

  ngOnDestroy(): void {
    // 组件销毁时移除全局方法
    delete (window as any).myClassFunction;
  }

  myClassFunction() {
    console.log('按钮触发了！');
  }
}

然后你的按钮就可以这么写：

<button onclick='myClassFunction()'>Click!</button>

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