Angular 5动态生成元素点击事件失效，求ElementRef解决方案

首先，咱们来分析你遇到的两个核心问题：动态生成的元素自带的(click)指令不生效，以及用ElementRef查询元素时返回null导致报错。

为什么会出现这些问题？ #

1. (click)指令失效：Angular的模板指令（比如(click)）是在组件初始化时由Angular编译器处理的，动态追加的HTML代码是Angular编译完成后才插入的，所以这些指令不会被Angular识别，自然无法触发。
2. querySelector返回null：你在执行append代码后立刻调用querySelector，此时浏览器可能还没完成DOM的渲染更新，元素还没真正出现在DOM树里，所以找不到元素。另外如果生成了多个.delete_file_event按钮，querySelector只会匹配第一个，其他按钮也无法绑定事件。

接下来给你几个可行的解决方案： #

方案1：用事件委托（最稳妥的手动DOM操作方式）

与其给每个动态生成的按钮单独绑定事件，不如利用事件冒泡机制，把事件监听绑定到它们的父容器上，这样不管后续生成多少按钮，点击事件都能被捕获。推荐用Angular的Renderer2来操作DOM，比直接用nativeElement更安全：

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

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

ngAfterViewInit() {
  // 获取父容器，比如你的ul元素
  const listContainer = this.elementRef.nativeElement.querySelector('.list-group');
  
  // 给父容器绑定点击事件，判断点击的目标是否是删除按钮
  this.renderer.listen(listContainer, 'click', (event) => {
    if (event.target.closest('.delete_file_event')) {
      this.save_event_btn_app(event);
    }
  });
}

save_event_btn_app(event) {
  console.log(event);
  // 这里可以根据event.target找到对应的li元素，做后续操作
}

方案2：确保DOM更新完成后再绑定事件

如果你坚持要给每个按钮单独绑定，可以在append后用setTimeout让浏览器先完成DOM渲染，再去查询元素：

// 假设你执行完append动态HTML的代码后：
setTimeout(() => {
  const deleteButtons = this.elementRef.nativeElement.querySelectorAll('.delete_file_event');
  deleteButtons.forEach(btn => {
    this.renderer.listen(btn, 'click', this.save_event_btn_app.bind(this));
    // 或者用addEventListener，不过Renderer2更符合Angular规范
    // btn.addEventListener('click', this.save_event_btn_app.bind(this));
  });
}, 0);

注意：用querySelectorAll来获取所有按钮，而不是querySelector，这样能绑定所有动态生成的按钮。

方案3：改用Angular的*ngFor渲染（最推荐的Angular范式）

其实Angular不推荐手动操作DOM，最好的方式是把动态数据放到组件的数组里，用*ngFor来渲染列表，这样Angular会自动处理模板指令，点击事件自然生效：

<!-- 组件模板里的代码 -->
<ul class="list-group" style="border-radius: 4px;">
  <li class="list-group-item" *ngFor="let item of fileList">
    <button (click)="save_event_btn_app(item)" class="btn btn-sm btn-danger delete_file_event pull-right" type="button">
      <i class="fa fa-close"></i> Delete
    </button>
  </li>
</ul>

// 组件类里的代码
fileList: any[] = [];

// 服务调用后，把数据push到fileList里
fetchDataFromService() {
  this.yourService.getData().subscribe(data => {
    this.fileList = data; // 或者this.fileList.push(...data);
  });
}

save_event_btn_app(item) {
  console.log('点击了删除按钮，对应的数据是：', item);
  // 这里可以处理删除逻辑，比如从fileList里移除该item
}

这种方式完全不需要手动操作DOM，既符合Angular的设计理念，也避免了各种DOM操作带来的问题。

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