如何检测ionic2中离子搜索栏的聚焦和模糊事件？答案

【问题标题】：How to detect onfocus and blur event of ion-searchbar in ionic2?如何检测ionic2中离子搜索栏的聚焦和模糊事件？
【发布时间】：2017-10-01 01:31:27
【问题描述】：

我现在正在使用 ionic2 来构建应用程序。我想检测搜索栏输入何时获得焦点以及何时模糊，以便我可以根据当前状态隐藏或显示某些组件。（例如，当用户点击此搜索栏时显示一些建议。）

这是我的代码：

<ion-searchbar #searchbar [(ngModel)]="searchInput"></ion-searchbar>

但是，我发现这个组件似乎没有这两个事件。我曾尝试像这样添加一个事件监听器，但它不起作用：

<ion-searchbar #searchbar [(ngModel)]="searchInput" (focus)="searchBarOnFocus()"></ion-searchbar>

那么我可以通过其他方式实现这个功能吗？

提前致谢！

ion-searchbar 有两个文档： component document & api document

【问题讨论】：

标签： angular typescript ionic2 dom-events

【解决方案1】：

要在搜索栏上捕捉焦点/模糊事件，您应该使用 (ionFocus) 和 (ionBlur) 而不是 Angular 的 (focus) 和 (blur)。对我来说就像一个魅力！

<ion-searchbar #searchbar placeholder="Type an address" showCancelButton
               (ionBlur)="checkBlur()"
               (ionFocus)="checkFocus()"></ion-searchbar>

【讨论】：