在 Angular 中检测输入内图标上的点击事件

Question

我在输入中添加了一个可点击的离子图标

 <ion-input (ionChange)="inputChanged($event)" [type]="inputType">
        <ion-button fill="clear"  (click)="togglePassword($event)">
             <ion-icon [name]="isPasswordHidden ? 'eye-outline' : 'eye-off-outline'"> </ion-icon>
        </ion-button>
  </ion-input>

问题是图标上的点击事件只有在文本输入不在焦点上时才会被检测到，一旦输入在焦点上并且你点击图标之后没有点击事件被触发，怎么可能即使输入处于焦点状态，我也检测到图标上的点击事件？

Answer 1

你应该把它们包在里面 <ion-item>

例如：

<ion-item lines="none">
   <ion-input type="{{isPasswordHidden ? 'text' : 'password'}}" placeholder="Password"></ion-input>
   <ion-icon [name]="isPasswordHidden ? 'eye-outline' : 'eye-off-outline'" slot="end" (click)="isPasswordHidden = !isPasswordHidden"></ion-icon>
</ion-item>

在 Angular 中检测输入内图标上的点击事件

Detect click event on icon inside input in Angular

html

typescript

ionic-framework

angular