Angular 5 и jQuery: (щелчок) не вызывает функцию

Question

Я сейчас работаю с Angular 5 и jQuery. Я создал динамический c div через jQuery, который я добавил к div.

var push_div = '<div class="col-md-6">
                <span style="color: green;">' + 
                droppedItemID + '</span>&nbsp;
                <a href="javascript:void(0)" 
                (click)="removeContent()">X</a>
                </div>'
$(push_div).hide().appendTo("#" + dropZoneID).fadeIn(1000);

Когда я нажимаю на ссылку, функция removeContent не вызывается.

removeContent() {
    console.log("function called");
}

Answer 1

Это по замыслу. Angular не обрабатывает привязки, определенные в строках, такие как innetHTML привязки. (click) переплет не будет обрабатываться в вашей ситуации.

Вы можете сделать это следующим образом:

var dropZoneID = 'dropZone'
var droppedItemID = 'droppedItemID'

function removeContent() {
  console.log('removeContent');
}

var push_div = '<div class="col-md-6"><span style="color: green;">' + droppedItemID + '</span>&nbsp;<a href="javascript:void(0)">X</a></div>'
$(push_div).hide().appendTo("#" + dropZoneID).fadeIn(1000);

// Using $(document).on(...) to bind events to dynamically created elements
$(document).on('click', $(push_div).find('a').eq(0), function() {
  removeContent()
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div id="dropZone"></div>

Для получения дополнительной информации:

{ ссылка }

{ ссылка }

Answer 2

Удалите это -> href="javascript:void(0)" из тега <a>.