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