Событие Onclick не работает в динамической HTML-строке в Angular 6

Question

Я пытаюсь манипулировать динамической HTML-строкой, добавляя к ней событие onclick и класс кнопки.Но, к сожалению, он не работает в Angular 6, но отлично работает с Angular 1 и Javascript ...

Ниже приведен мой код.

  getUnitTestmethod() {

    const htmlObject = document.createElement('div');
    htmlObject.innerHTML = this.unit;
    const btnClarify = htmlObject.getElementsByClassName('customizeclarify');

    let j = btnClarify.length;
    let parentclr;
    let currInputElmclr;
    while (j--) {
        const countNo = 0;

        currInputElmclr = this.renderer.createElement('button');
        this.renderer.setProperty(currInputElmclr, 'id', 'popup');
        this.renderer.setProperty(currInputElmclr, 'innerText', 'TestButtonText');
        this.renderer.setProperty(currInputElmclr, '(click)', 'ShowAlert()');
        this.renderer.setProperty(currInputElmclr, 'class', 'btn btn-success');

        parentclr = btnClarify[j].parentNode;
        parentclr.insertBefore(currInputElmclr, btnClarify[j]);
        parentclr.removeChild(btnClarify[j]);

      }
      this.unit = htmlObject.innerHTML;
}

Answer 1

Как уже упоминалось @ amansoni211, вы можете создать директиву и добавить к ней hostlistener. Возвращаясь к вашей настройке, если вы хотите добавить прослушиватель событий к вашей цели, вы можете сделать это с помощью this.renderer.listen('click', target);.