例如,我有一个功能itemDragged()
。如何在函数内部获取ion-item-sliding
的引用以获取其当前的class属性?
<ion-item-sliding *ngFor="let activity of activities" (click)="showModalInfo(activity)" (ionDrag)="itemDragged($event)">
您可以在模板中使用引用变量
<ion-item-sliding #iis *ngFor="let activity of activities" (click)="showModalInfo(activity)" (ionDrag)="itemDragged(iis)">
<p>{{iis.class}}</p>
但是在事件类中挖掘你可以得到这样的类
itemDragged(event){
console.log(event._elementRef.nativeElement.className);
}
你会使用ViewChild,并获得nativeElement吗?
在组件API中,请注意关键是您将如何在代码中访问它,传递给ViewChild的值是您为组件提供的“#”ID(这是ES6,在TS中您使用ViewChild注释):
...
queries { 'myElement' : new ViewChild ( 'myelement' ) }
...
在标记中:
<div #myelement></div>
在组件函数(处理程序,无论何时需要获取它)中,nativeElement属性为您提供对HTML元素的引用,因此您可以设置innerHTML,添加处理程序或您需要执行的任何其他操作。当然还有其他方法可以通过绑定到属性来实现这一点(例如,您可以绑定到(click)或[innerHTML]):
...
this.myElement.nativeElement... // etc.
...
或者,如果您想为多个元素使用单个处理程序(例如,一堆不同的可点击div),您可以使用event.target执行相同的操作。问题在于,因为现在给ID提供了“坏”,你必须有另一种方法来识别点击哪个DIV。你可以查看标签(innerHTML),你可以给它一个虚拟样式并检查它,等等。