Angular 4动态追加HTML时Typescript点击事件失效问题求助

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是：用原生DOM方法动态插入的HTML里，Angular的(click)模板语法不会被编译，所以绑定的myEvent()根本不会被Angular识别到，自然触发不了。

下面给你两种可行的解决方案，根据你的场景选就行：

方案一：用Angular的Renderer2创建元素并绑定事件（推荐） #

这是最符合Angular规范的做法，通过Renderer2来操作DOM，确保事件绑定在Angular的上下文里生效：

// 首先在组件里注入Renderer2
import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {}

// 改写你的viewRender钩子
viewRender: (view, element) => {
  // 1. 创建容器div
  const container = this.renderer.createElement('div');
  this.renderer.addClass(container, 'col-sm-12');

  // 2. 创建checkbox元素
  const checkbox = this.renderer.createElement('input');
  this.renderer.setAttribute(checkbox, 'type', 'checkbox');
  this.renderer.setAttribute(checkbox, 'id', 'click');
  this.renderer.addClass(checkbox, 'appointment-margin-checkbox');

  // 3. 绑定点击事件到你的myEvent方法
  this.renderer.listen(checkbox, 'click', () => {
    this.myEvent();
  });

  // 4. 把元素组装好，插入到目标位置
  this.renderer.appendChild(container, checkbox);
  // 获取fc-axis:first对应的原生DOM元素（element.find返回的是jQuery对象，取[0]拿原生节点）
  const targetDom = element.find('.fc-axis:first')[0];
  this.renderer.appendChild(targetDom, container);
}

方案二：用事件委托捕获点击 #

如果不想改太多代码，也可以利用事件冒泡的原理，在父元素上绑定事件监听器，通过判断目标元素来触发myEvent()：

// 在组件的ngOnInit里添加事件委托
ngOnInit() {
  // 找到FullCalendar的父容器（比如你给日历加了id="my-calendar"）
  const calendarContainer = document.getElementById('my-calendar');
  
  // 绑定点击事件到父容器
  calendarContainer.addEventListener('click', (event) => {
    // 判断点击的目标是不是我们的checkbox
    if (event.target.matches('#click.appointment-margin-checkbox')) {
      this.myEvent();
    }
  });
}

// 你的viewRender钩子可以保持原来的HTML插入方式
viewRender: function (view, element) {
  const d = '<div class= "col-sm-12"><input type="checkbox" id="click" class="appointment-margin-checkbox"/></div>';
  element.find('.fc-axis:first').html(d);
}

为什么原来的方法不行？ #

Angular在组件初始化时会编译模板里的内容，识别(click)这类指令并绑定事件，但你用element.find().html(d)插入的是纯HTML字符串，Angular不会再去编译这段动态添加的内容，所以(click)="myEvent()"完全就是普通的HTML属性，没有任何绑定效果。

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