ボタンを持つ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();を使用してこの問題を解決できます。

this plunkerをご覧ください。

あなたがそこに見ることができるように、私はまた、両方の方法に

<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> 

を$eventオブジェクトを送信し、私がクリックしたときにこれだけのダウンロード方法が実行され、イベントの伝播を停止するためにその情報を使用ダウンロードアイコン

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

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