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