Angular克隆按钮丢失点击事件，绑定事件后无法访问组件变量怎么办？

你遇到的问题其实是Angular中直接操作原生DOM时常见的两个坑：一是克隆DOM元素不会自动继承Angular的事件绑定（因为Angular的事件是通过自身机制处理的，并非原生事件绑定）；二是原生事件回调的this上下文会丢失，导致无法访问组件变量。下面给你两种解决方案，优先推荐第一种符合Angular设计理念的方式：

方法一：用Angular数据驱动渲染（推荐） #

Angular的核心是数据驱动视图，所以不要直接操作DOM来克隆元素，而是通过维护一个数据数组，用*ngFor来渲染按钮。这样不仅能自动绑定事件，还能避免DOM操作带来的各种问题。

修改后的代码： #

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 用数组存储要渲染的按钮数据
  clonedButtons: { value: string }[] = [];
  cloneCounter = 0;

  CloneButton() {
    // 往数组里添加新按钮的数据
    this.clonedButtons.push({
      value: `Clone ${this.cloneCounter++}`
    });
  }

  jsclicked() {
    // 现在可以正常访问组件的cloneCounter变量了
    console.log('按钮被点击，当前计数：', this.cloneCounter);
  }
}

app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <input type="button" (click)="CloneButton()" value="Clone">
    </div>
    <div class="col-md-6">
      <!-- 用*ngFor遍历数组渲染按钮，自动绑定点击事件 -->
      <input 
        type="button" 
        *ngFor="let btn of clonedButtons" 
        (click)="jsclicked()" 
        [value]="btn.value"
      >
    </div>
  </div>
</div>

这种方式完全遵循Angular的变更检测机制，事件绑定和变量访问都不会有问题，代码也更易维护。

方法二：修复原生DOM操作的上下文问题（适配原有代码） #

如果你一定要用原生DOM克隆的方式，需要解决两个问题：手动绑定点击事件，以及确保回调函数的this指向组件实例。

修改后的代码： #

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('cloned') cloned: ElementRef;
  cloneCounter = 0;

  CloneButton(event: any) {
    let newbutton = event.target.cloneNode(true) as HTMLInputElement;
    newbutton.value += this.cloneCounter++;
    
    // 用箭头函数绑定上下文，确保this指向组件实例
    newbutton.addEventListener('click', () => this.jsclicked(), false);
    
    // 或者用bind(this)的方式：
    // newbutton.addEventListener('click', this.jsclicked.bind(this), false);
    
    this.cloned.nativeElement.appendChild(newbutton);
  }

  jsclicked() {
    console.log('克隆按钮被点击，当前计数：', this.cloneCounter);
  }
}

app.component.html（保持你的原有代码即可）

<div class="container"> 
  <div class="row"> 
    <div class="col-md-6"> 
      <input type="button" (click)="CloneButton($event)" value="Clone"> 
    </div> 
    <div class="col-md-6" #cloned></div> 
  </div> 
</div>

为什么原来的代码不行？ #

当你直接写newbutton.addEventListener('click', this.jsclicked, false)时，回调函数jsclicked中的this指向的是触发事件的DOM按钮元素，而非Angular组件实例，所以this.cloneCounter会显示为undefined。用箭头函数或者bind(this)可以强制让this指向组件实例，这样就能正常访问组件变量了。

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