Ionic 2 xử lý các nhấp chuột trên các phần khác nhau của phần tử

Question

Tôi có một thẻ có hai nút. Nhấn vào thẻ để mở chi tiết trang:

<ion-card *ngFor="let appointment of appointmentList" 
       (click)="goToDetails(appointment)"> 
     <ion-card-header> 

      <ion-item text-wrap> 
      <ion-icon start name="ios-medkit-outline"></ion-icon> 
      {{appointment.ProviderName}} 
      </ion-item> 
      <ion-row> 
      <ion-col width-50> 
       <button full ion-button color="secondary" (click)="confirmTrip()"> Confirm</button> 
      </ion-col> 
      <ion-col width-50> 
       <button full ion-button color="danger" (click)="cancelTrip()"> Cancel</button> 
      </ion-col> 
      </ion-row> 
     </ion-card-header> 
     <ion-list> 
      <ion-item *ngIf="!(appointment.Legs[0].AppTime==='')"> 
      <ion-label> 
       Appointment time 
      </ion-label> 
      <ion-badge item-right> 
       {{appointment.Legs[0].AppTime}} 
      </ion-badge> 
      </ion-item> 

      <ion-item *ngIf="!(appointment.Legs[0].PickUpTime==='')"> 
      <ion-label> 
       Pick up time 
      </ion-label> 
      <ion-badge item-right> {{appointment.Legs[0].PickUpTime}}</ion-badge> 
      </ion-item> 

      <ion-item> 
      <ion-label> 
       Driver status 
      </ion-label> 
      <ion-badge item-right>{{appointment.Legs[0].Status}}</ion-badge> 
      </ion-item> 

     </ion-list> 
     </ion-card> 

Nhấp vào nút sẽ kích hoạt các hành động riêng biệt. Bây giờ, nhấp vào nút dẫn đến hiển thị trang chi tiết VÀ những hành động cụ thể này. Có cơ chế nào để tách các nút bấm từ một phần khác của thẻ không?

Answer 1

Tôi nghĩ rằng bạn phải kiểm tra tương tự bằng cách sử dụng event.stopPropagation() cho các sự kiện nút:

// HTML

<ion-item text-wrap> 
    <ion-icon start name="ios-medkit-outline"></ion-icon> 
    {{appointment.ProviderName}} 
    </ion-item> 
    <ion-row> 
    <ion-col width-50> 
     <button full ion-button color="secondary" (click)="confirmTrip($event)"> Confirm</button> 
    </ion-col> 
    <ion-col width-50> 
     <button full ion-button color="danger" (click)="cancelTrip($event)"> Cancel</button> 
    </ion-col> 
    </ion-row> 
</ion-card-header> 

// Component

cancelTrip(e){ 
    // e.preventDefault(); // use this to prevent default event behavior 
    e.stopPropagation(); 

    // code to cancel trip 
} 

confirmTrip(e){ 
    // e.preventDefault(); // use this to prevent default event behavior 
    e.stopPropagation(); 

    // code to confirm trip 
}