イオン2ハンドルは要素の異なる部分をクリック

Question

私は2つのボタンを持つカードを持っています。カードそのものをタップして詳細ページを開きます：

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