来自附加 HTML 的组件的 Angular 2+ 调用函数答案

【问题标题】：Angular 2+ calling functions of the component from appended HTML来自附加 HTML 的组件的 Angular 2+ 调用函数
【发布时间】：2018-07-18 18:21:11
【问题描述】：

我有一个很难找到答案的问题：

我需要通过 JQuery 在我的组件中附加一些 HTML：

$('.calendar-container').append('<div class="confirm-popover" style="top: ' + (this.popoverTop - 80) + 'px; left: ' + this.popoverLeft + 'px">' +
'<div class="day-container"><div class="day-start">MER</div><div class="day-num">' + this.firstDaySelected + ' Mai</div><div class="day-year">2018</div></div>' +
'<div class="separator">-</div>' +
'<div class="day-container"><div class="day-start">JEU</div><div class="day-num">' + this.lastDaySelected + ' Mai</div><div class="day-year">2018</div>' +
'</div><div class="buttons"><button id="days-validator" class="validate" i18n>Valider</button><br /><button class="cancel" i18n>Annuler</button><div class="triangle"></div></div>');

此代码中有按钮。我希望能够处理这些点击事件并调用组件的功能。一定有办法做到这一点，对吧？

【问题讨论】：

Dynamically add event listener in Angular 2的可能重复

标签： jquery html angular

【解决方案1】：

如果您使用 jQuery，您可以从组件控制器中进行操作。使用 .on() 方法：

$('body').on('click', '#days-validator', (event) => { 
    // Triggered when you press the Valider button
});

你可以对其余的按钮做同样的事情

【讨论】：