在 Angular 2 中按类绑定点击事件

Question

假设我有以下模板：

<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 元素时获取该元素并查询被单击元素的 ID 或任何其他属性？

Answer 1

有很多方法可以做到这一点。 直接解决方案：

<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);
}

Answer 2

是的，你可以，但这取决于策略。 您可以通过 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 中组件本身的引用。 所以我们能够过滤搜索到这个组件。