1.项目中要做一个元素周期表,html结构大致如下
<ul id="periodicTable" (click)="elementClick($event)">
<li data-name="H"></li>
<li data-name="He"></li>
......
</ul>
2.PeriodicTable组件如下:
import {Component,Output,EventEmitter} from "@angular/core"
@Component({
selector:"periodic-table",
templateUrl:"app/components/periodic-table.html",
styleUrls:["app/components/periodic-table.css"]
})
export class PeriodicTable{
@Output() periodicTableClick:EventEmitter<string>=new EventEmitter<string>();
elementClick=function(event:Event){
let target = event.target || event.srcElement ;
if(target){
this.periodicTableClick.emit(target.getAttribute("data-name"))
}
return false;
}
}
3.元素周期表的事件绑定我用了事件委托的方法,把事件绑在了元素li
的父元素ul
上,通过e.target.getAttribute("data-name")得到元素值。问题是把ts编译成js的过程中,会报EventTarget对象没有getAttribute()方法错误,求问我该怎么得到li的自定义data-name属性
把EventTarget对象做一下强制类型转换就行了(<HTMLElement>event.target).getAttribute("data-name");谢谢大家。