Допустим, у меня есть следующий шаблон:
<ul>
<li id="1" class="selectModal">First</li>
<li id="2" class="selectModal">Second</li>
<li id="2" class="selectModal">Third</li>
</ul>
Как я могу связать событие щелчка по классу в TypeScript, чтобы при щелчке элемента li я мог получить элемент и запросить идентификатор или любой другой атрибут элемента, по которому щелкнул щелчок?
2 ответа
Есть много способов сделать это. Прямое решение:
<ul (click)="onClick($event.target)">
<li id="1" class="selectModal">First</li>
<li id="2" class="selectModal">Second</li>
<li id="2" class="selectModal">Third</li>
</ul>
onClick(e:HTMLElement){
console.log(e.id, e.className);
}
Да, можно, но это зависит от стратегии. Вы можете сделать это с помощью JQuery или с помощью аксессоров DOM. В моей команде мы используем JQuery, но мы не ищем элементы во всем DOM, вместо этого мы используем класс ElementRef:
import { ElementRef } from '@angular/core';
...
constructor(private elementRef : ElementRef) {
}
ngAfterViewInit() {
jQuery(this.elementRef.nativeElement).find('selectModal').on('click', () => {
//do something here
});
}
Класс ElementRef - это ссылка на сам компонент в DOM. Таким образом, мы можем отфильтровать поиск по этому компоненту.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Имейте в виду, что JavaScript — это НЕ то же самое, что Java! Включите все ярлыки, относящиеся к вашему вопросу; например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [svelte] и т. д.