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

时间:2017-02-13 12:31:42

标签: javascript angular ionic-framework ionic2

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

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

3 个答案:

答案 0 :(得分:4)

您可以在模板中使用参考变量

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

您是否会使用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),你可以给它一个虚拟样式并检查它等等。