Angular 8 и jQuery: хотите вызвать функцию

Question

Я хочу вызвать функцию, щелкая динамически сгенерированные URL.

var push_div = '<a href="javascript:void(0)" onclick="myFunc('1')">Hello1</a></div>' + '<a href="javascript:void(0)" onclick="myFunc('2')">Hello2</a></div>';

myFunc(e) {
  console.log(e);
}

Но я получил ошибку:

Uncaught ReferenceError: myFun c не определено

Затем я изменил свой код следующим образом:

var push_div = '<a id="1" href="javascript:void(0)">Hello1</a></div>' + '<a id="2" href="javascript:void(0)">Hello2</a></div>';


$(document).on('click', $(push_div).find('a').eq(0), function() {
  // my code
});

Это не выводит меня из строя, однако я не могу определить, какую гиперссылку я нажал. Есть идеи?

Answer 1

Вы можете проверить свойство id ссылки, по которой щелкают, и вызывать функции на основе другого идентификатора. Вот демо

вот краткое объяснение,

Все, что вам нужно сделать, это

Подготовить HTML данные внутри вашего файла компонента .

var push_div =
      '<a id="1" href="javascript:void(0)">Hello1</a></div>' +
      '<a id="2" href="javascript:void(0)">Hello2</a></div>';

Захватить ссылку на div, в который вы хотите добавить эти HTML данные.

const div = document.getElementById("wrapper");
$(div).html(push_div);

добавить прослушиватель события click для вновь созданных тегов привязки,

$(div).find('a').on("click", ev => {
      switch (ev.target.id) {
        case "1":
          this.myFunction1();
          break;
        case "2":
          this.myFunction2();
          break;
      }
    });

Вот и все. Кстати, вы можете захотеть сделать это внутри вашего angular приложения, но на самом деле эта логика c не имеет ничего общего с приложением angular. это чистая javascript вещь. Я надеюсь, что это поможет.

Здесь я хотел бы поделиться всем файлом компонента.

import { Component, AfterViewInit } from "@angular/core";
import $ from 'jquery';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  name = "Angular";

  ngAfterViewInit(): void {
    const div = document.getElementById("wrapper");

    var push_div =
      '<a id="1" href="javascript:void(0)">Hello1</a></div>' +
      '<a id="2" href="javascript:void(0)">Hello2</a></div>';

    $(div).html(push_div);

    $(div).find('a').on("click", ev => {
      switch (ev.target.id) {
        case "1":
          this.myFunction1();
          break;
        case "2":
          this.myFunction2();
          break;
      }
    });
  }

  myFunction1() {
    alert(1);
  }

  myFunction2() {
    alert(2);
  }
}