如何在Angular 2中获得对当前元素的引用

Question

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

<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

您会使用ViewChild并获取nativeElement吗？

在组件API中，请注意，关键是如何在代码中访问它，传递给ViewChild的值是您给组件的"#"id(这是ES6，在TS中您将使用ViewChild注释)：

...
queries { 'myElement' : new ViewChild ( 'myelement' ) }
...

在标记中：

<div #myelement></div>

在您的组件函数(处理程序，无论您需要在哪里获取它)中，nativeElement属性都会为您提供对HTML元素的引用，因此您可以设置innerHTML、添加处理程序或其他任何您需要做的事情。当然，还有其他方法可以通过绑定到属性来实现这一点(例如，您可以绑定到(点击)或[innerHTML])：

...
this.myElement.nativeElement... // etc.
...

或者，如果你想对多个元素(比如说，一堆不同的可点击div)使用一个处理程序，你可以使用event.target来做同样的事情。问题是，因为现在提供ID被认为是"糟糕的"，所以你必须有一种替代的方式来识别哪个DIV被点击了。你可以检查标签(innerHTML)，你可以给它一个伪样式并检查它，等等。

Answer 3

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

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