Допустим, у меня есть следующий шаблон:

<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 я мог получить элемент и запросить идентификатор или любой другой атрибут элемента, по которому щелкнул щелчок?

4
Ultranuke 23 Июн 2016 в 00:56
1
Нет кода angular, не могли бы вы показать нам, какая часть вашего кода основана на angular, чтобы кто-то мог помочь вам лучше.
 – 
Nikhil Girraj
23 Июн 2016 в 01:01

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);
}
7
kemsky 23 Июн 2016 в 01:17
5
Думаю, это не ответ на вопрос. Вопрос о привязке события клика на основе класса. Что-то вроде того, что JQuery ('. SelectModal'). Click (...)
 – 
Amr ElAdawy
20 Авг 2016 в 08:51

Да, можно, но это зависит от стратегии. Вы можете сделать это с помощью 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. Таким образом, мы можем отфильтровать поиск по этому компоненту.

2
Hakan Fıstık 22 Апр 2020 в 15:25
7
JQuery кажется излишним для этого варианта использования ;-) jQuery следует избегать в Angular2 (если возможно)
 – 
Günter Zöchbauer
23 Июн 2016 в 09:13