从 dom 生成的元素调用组件函数 - 角度答案

【问题标题】：Call component function from dom generated element - angular从 dom 生成的元素调用组件函数 - 角度
【发布时间】：2020-03-27 20:32:34
【问题描述】：

我想创建一个动态数量的 html dom 元素按钮，并让它们能够在单击时调用服务。有什么办法吗？

例如test.component.ts：

import {ApiService } from '../services/api.service';
...
export class test implement OnInit(){
    constructor(private apiGet : ApiService) { }
    ngOnInit() {
        ...
        for (i = 0; i < x; i++) {
            var row = document.getElementById('row');
            var cell = insertCell();
            cell.innerHTML = "<button name='" + i + '" (click)=test.callService()>click me</button>";
        }
    }
    public callService() {
        //call ApiService here using buttons name
    }
}

当我将 (click) 事件放在 test.component.html 内的 html 元素上时，我一直在让它工作，但它对 dom 生成的按钮不起作用。有什么我遗漏的，还是有更好的方法来做到这一点？

【问题讨论】：

要动态生成元素，请考虑使用*ngFor

标签： angular typescript dom

【解决方案1】：

对于动态创建的元素，必须使用addEventListener() 方法定义事件处理程序。您也可以手动触发更改检测以确保元素是在 DOM 中生成的。试试下面的

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ApiService } from '../services/api.service';
...
export class test implement OnInit {
  constructor(private apiGet: ApiService, private _cdr: ChangeDetectorRef) { }

  ngOnInit() {
    ...
    for (i = 0; i < x; i++) {
      var row = document.getElementById('row');
      var cell = insertCell();
      cell.innerHTML = "<button id='button" + i + "' name='" + i + '">click me</button>";
    }
    this.addEventListeners(x);
  }

  private addEventListeners(x) {
    this._cdr.detectChanges();    // <-- manually trigger change detection to be sure
    for (i = 0; i < x; i++) {
      const button = document.getElementById('button' + i);
      if (button) {
        button.addEventListener('click', this.callService());
      }
    }
  }

  public callService() {
      //call ApiService here using buttons name
  }
}

同样不相关，export class test implement OnInit(){ 应替换为 export class test implement OnInit {。此处不需要括号。

【讨论】：

虽然看起来不太漂亮

【解决方案2】：

你的 html 使用 ngFor

 <div *ngFor="let button of buttons">
     <button (click)="callService(button.name)">{{button.name}}</button>
 </div>

还有你的组件：

  buttons = [
    {
      name: 'one'
    },
    {
      name: 'two'
    }
  ];

  callService(buttonName) {
    alert(`call ApiService here using buttons name: [${buttonName}]`);
  }

检查这个stackblitz。

【讨论】：