解决使用angular开发时 动态生成的HTML结构无法绑定事件

现在在用angular 7版本开发时,动态生成html结构插入到页面中时添加的click不生效,废了好大的劲才解决T_T

因为时动态生成的html所以点击事件不生效,如果时JQ可以使用事件代理

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

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

bindClickEvent(html) {
// html: 动态拼接的html结构
    console.log(html);
    // 将html插入到指定位置
    $('#uploadafter').before(html);
    // 给所有动态生成的元素绑定事件
    const deleteImg  = $('.enclosure-module').find('.glyphicon');
    deleteImg.each((i, v) => {
      this.renderer.listen(v, 'click', (event) => {
        event.stopPropagation();
        console.log(event);
        console.log($(event.target).parent());
        // 做一些需要点击之后的事情
        $(event.target).closest('.upload-img').remove();
      });
    });
}

如果是angular2的话
将
import { Component, OnInit, ElementRef, Renderer2 } from ‘@angular/core’;
中Renderer2 换成Renderer2即可