angular - 当我点击 ionic 图标时， ionic 卡中的方法也会被触发

Question

我有一个ion-card，点击它会在另一页上打开该卡，并且我在 ion-icon 上有一个功能，该功能位于 ion- 上方卡，点击它会打开个人资料页面。

问题是，当我单击 ion-icon 时，它会触发 viewProfile() 方法，并且还会触发 openPage() 方法 ionic 卡。

<ion-card class="cards" text-left (click)="openPage(item)"
      *ngIf="uid != item.uid && !item.hasOwnProperty('opponentUid')">
  <!--Card-image-->
  <div card-image>
      <img [src]="item.imageUrl" />
      <span edit text-uppercase>
         <ion-icon name="contact" (click)="viewProfile(item.uid)"></ion-icon>
      </span>
   </div>
</ion-card>

有什么建议可以解决这个问题。谢谢

Answer 1

由于 ion-icon 包含在 ion-card 中，我建议将 ion-card 单击操作移到卡片图像 div 上。

<ion-card class="cards" text-left 
      *ngIf="uid != item.uid && !item.hasOwnProperty('opponentUid')">
  <!--Card-image-->
  <div card-image (click)="openPage(item)">
      <img [src]="item.imageUrl" />
      <span edit text-uppercase>
         <ion-icon name="contact" (click)="viewProfile(item.uid)"></ion-icon>
      </span>
   </div>
</ion-card>