ionic2离子列表,按钮都有(点击)事件

Question

我想要实现的是当我点击下载按钮它应该做的其他事情,当点击该项目时,它应该打开一个新的窗口

<ion-list>
    <ion-item *ngFor="let reading_material of reading_materials" (click)="gotoReadingMaterial(reading_material)">
        {{reading_material.title}}
        <ion-icon item-right name="download" (click)="downloadMaterial(reading_material)"></ion-icon>
    </ion-item>
</ion-list>

但是当我点击下载按钮时,两个事件都会被点击.当我点击下载按钮时,有没有办法可以抑制项目事件？

Answer 1

您可以使用以下方法解决此问题event.stopPropagation();.

请看看这个plunker.

就像你可以看到那样,我也将$event对象发送到两种方法

<ion-list>
    <ion-item *ngFor="let item of items" (click)="open($event, item)">
        {{ item }}
        <ion-icon (click)="download($event, item)" item-right name="download"></ion-icon>
    </ion-item>
</ion-list>

然后我使用该信息来阻止事件的传播,因此在单击下载图标时只会执行下载方法

  public open(event, item) {
    event.stopPropagation();
    alert('Open ' + item);
  }

  public download(event, item) {
    event.stopPropagation();
    alert('Download ' + item);
  }