离子2手柄点击元素的不同部分

Question

我有一张卡片有两个按钮。点击卡本身应该打开详细信息页面：

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

单击按钮应激发单独的操作。现在，点击按钮可显示详细信息页面以及这些特定操作。是否有任何机制将单击按钮的其他部分单击按钮？

Answer 1

我认为你必须使用event.stopPropagation()按钮事件查看相同的：

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

//组件

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 
}