附加HTML中組件的Angular 2+調用函數

Question

我有一個問題，我很難找到答案：

我需要在組件內部通過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>');

此代碼中有按鈕。 我希望能夠處理這些事件的click事件並調用組件的功能。 必須有一種方法可以，對嗎？

Answer 1

如果您使用的是jQuery，則可以從組件控制器執行此操作。 使用.on（）方法：

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

您可以對其余按鈕執行相同的操作