Question

从我的代码中，我有一个可以多次创建div元素（使用surroundContents()）的函数，如何使这些创建的div元素在同一页面的类中触发一个函数？

更确切地说，我需要这些div元素（通过函数createDiv()创建）中的任何一个都能够通过单击位于clickCreatedDiv(arg)中的名为MyPage class的函数来触发，并以一个争论。我已经尝试过element.setAttribute('(click)', 'clickCreatedDiv()');，但没有成功。我该如何实现这种行为？

export class MyProvider {
  wrapSelection(comment) {
    let element = document.createElement("div")
    element.setAttribute('(click)', 'clickCreatedDiv()');
    element.surroundContents(element);
  }
}

import { MyProvider } from '../../providers/my-provider';
@Component({
    selector: 'page-mypage',
    templateUrl: 'mypage.html',
}) 
export class MyPage {
  constructor(public myprovider: MyProvider) {}
  createDiv() {
    this.myprovider.wrapSelection();
  }

  clickCreatedDiv(arg) { // This is what I want to trigger with click
    alert('click ' + arg);
  }
}

Answer 1

我会将click函数作为wrapSelection的回调传递。例如。像这样：

export class MyProvider {
  wrapSelection(comment, onClick) {
    let element = document.createElement("div")
    element.setAttribute('(click)', onClick);
    element.surroundContents(element);
  }
}

export class MyPage {
  constructor(public myprovider: MyProvider) {}
  createDiv() {
    this.myprovider.wrapSelection('Some comment', this.clickCreatedDiv);
  }

  clickCreatedDiv(arg) { // This is what I want to trigger with click
    alert('click ' + arg);
  }
}

Answer 2

Angular事件绑定语法(click)="doSomething()"不能用于在动态创建的HTML元素上设置事件处理程序。要使其正常工作，您可以从MyPage类传递事件处理程序，并使用element.addEventListener进行设置：

export class MyProvider {
  wrapSelection(eventHandler) {
    let element = document.createElement("div")
    element.addEventListener("click", () => { eventHandler("Some text"); });
    ...
  }
}

在MyPage中，事件处理程序应定义为箭头函数，以保留this并允许访问类成员：

createDiv() {
  this.myProvider.wrapSelection(this.clickCreatedDiv);
}

clickCreatedDiv = (arg) => {
  alert('Clicked: ' + arg);
}

有关演示，请参见this stackblitz。

离子添加点击功能到动态创建的div

2 个答案: