如何在Angular 2中引用当前元素？

Question

例如，我有一个功能itemDragged()。如何在函数内部获取ion-item-sliding的引用以获取其当前的class属性？

<ion-item-sliding *ngFor="let activity of activities" (click)="showModalInfo(activity)" (ionDrag)="itemDragged($event)">

Answer 1

您可以在模板中使用引用变量

<ion-item-sliding #iis *ngFor="let activity of activities" (click)="showModalInfo(activity)" (ionDrag)="itemDragged(iis)">
<p>{{iis.class}}</p>

Answer 2

但是在事件类中挖掘你可以得到这样的类

  itemDragged(event){
    console.log(event._elementRef.nativeElement.className);
  }

Answer 3

你会使用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），你可以给它一个虚拟样式并检查它，等等。