时间戳

首页 > 解决方案 > 从 dom 生成的元素调用组件函数 - 角度

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

问题描述

我想创建一个动态数量的 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 生成的按钮不起作用。有什么我想念的，还是有更好的方法来做到这一点？

标签： angulartypescriptdom

解决方案

对于动态创建的元素，必须使用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 {. 这里不需要括号。

推荐阅读