Я использую директиву HostListener для прослушивания события click для элементов DOM.
@HostListener('click', ['$event.target']) onClick(e) {
console.info("event", e)
}
Когда я нажимаю на тег кнопки, объект "e" имеет следующее:
<button _ngcontent-abr-c111 type = "button" class = "close ng-tns-c111-3">x</button>
Если я перебираю объект, он показывает следующее:
const objectList = Object.keys(e).map(k => (
console.info("key", k)
));
// result = key __zone_symbol__clickfalse
Но что я хотел бы спросить в своем коде, так это то, что если элемент кнопки имеет класс «закрыть», если он есть, я сделаю одно, а если нет, то другое.
Как я мог это сделать? Спасибо,"
Элемент, который вы получили от HostListener/Event, является целью, которая является HTMLElemenet
или, в данном случае, я думаю, HTMLButtonElement
.
Вы можете использовать для них обычные методы JavaScript для HTMLElements. В этом случае вы ищете e.classList.contains('close')
.
Использовать список классов
@HostListener('click', ['$event.target']) onClick(e) {
if (e.classList.contains('close'){
//do stuff
}else{
//
}
}