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中按类绑定click事件，因此当单击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 acessors来实现。在我的团队中，我们使用JQuery，但是我们不会搜索整个DOM来查找元素，而是使用名为ElementRef的类： <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <tripRequestUpdateStatus> <id>1</id> <status>Approved</status> <updatedBy source="lgtc">1</updatedBy> </tripRequestUpdateStatus>

import { ElementRef } from '@angular/core';
...
constructor(private elementRef : ElementRef) {
}

ngAfterViewInit() {
    jQuery(this.elementRef.nativeElement).find('selectModal').on('click', () => {
    //do something here
    });
}

ElementRef类是DOM中组件本身的引用。因此，我们可以将搜索过滤到此组件。

在Angular 2中按类绑定事件

2 个答案: