Ionic добавить функцию щелчка к динамически созданному div

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

Синтаксис привязки событий 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);
}

См. этот стек для демонстрации.

Answer 2

Я бы передал функцию щелчка в качестве обратного вызова для 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);
  }
}