Блог

Главная - Вопросы по программированию - В событие Onclick добавлена динамически создаваемая кнопка, не работающая в innerHTML

В событие Onclick добавлена динамически создаваемая кнопка, не работающая в innerHTML

#typescript #angular6 #innerhtml #dom-events #dynamic-html

#typescript #angular6 #innerhtml #dom-события #dynamic-html

Вопрос:

Я получаю HTML-строку с сервера. Внутри HTML-строки я добавил кнопку с идентификатором, текстом и событием onclick и установил для нее значение innerHTML. В пользовательском интерфейсе кнопка была создана с идентификатором и текстом, но событие Onclick не работает в Angular 6.

Опробованные решения:

  1. Создал директиву с кнопкой в шаблоне, прикрепил директиву внутри динамического html
  2. Создал компонент с кнопкой в шаблоне, прикрепил компонент внутри динамического HTML

В обоих вышеуказанных случаях кнопка была создана, но прослушиватель событий не работал.

И я много гуглил, не смог найти ни одного рабочего примера или конкретного решения для предоставления

Любые решения приветствуются

Комментарии:

1. Я не говорю, что это невозможно, но вы не должны загружать динамический HTML внутри компонента angular. Вы можете заставить ее работать с помощью компилятора и еще много чего, но это означает, что вы должны включить компилятор в свой проект сборки AOT. Вам следует найти другой способ получения HTML (предпочтительно во время сборки) или другой способ обработки щелчка

2. Привет @PierreDuc Спасибо за ответ .. можете ли вы, пожалуйста, предоставить его с примером кода или процесса, как связать событие с динамическим HTML.

Ответ №1:

Angular не обрабатывает HTML, добавленный [innerHTML] =»…»

Таким образом, вы можете обработать событие click следующим образом.

 elementRef.nativeElement.querySelector('button').addEventListener(...)

Комментарии:

1. Я попробовал приведенный ниже код.. Это тоже не сработало… this.elRef.nativeElement.querySelector('button').addEventListener('click', this.showname.bind(this));