点击取消按钮时删除/关闭 Angular 或 Ionic 5 中的搜索栏

Posted 2023-02-24

【中文标题】点击取消按钮时删除/关闭 Angular 或 Ionic 5 中的搜索栏

【英文标题】：Remove/Close search bar in Angular or Ionic 5 when hitting cancel button

【发布时间】：2020-06-19 22:48:02

【问题描述】：

我在移动设备上使用Ionic，我想确保当您点击取消按钮时，搜索栏会完全移除。更好的是：当您点击搜索栏外的任何区域时。单击图标后，我已经显示了搜索栏。

   <ion-searchbar
            *ngIf="toggled"
            placeholder="Search"
            inputmode="text" type="text"
            [(ngModel)]="searchTerm" mode="ios"
            (ionChange)="onSearchChange($event)"
            (ionCancel)="showDefaultBar()"
            (ionBlur)="showDefaultBar()"
            showCancelButton="always"
            [debounce]="250"
            animated="true">
</ion-searchbar

这里是代码。因此，您可以看到始终显示取消按钮。问题是当你点击取消时，它只会清除文本输入字段，并不会真正取消搜索栏。我想确保在点击取消后隐藏/删除搜索栏，就像在原生 iOS 上一样。

有没有办法做到这一点？在 Ionic 文档中找不到任何内容。

【问题讨论】：

是您的showDefaultBar() 函数在取消时调用？？？

不，它是作为占位符存在的。目前，它什么也没做。我应该使用它吗？

你能用.ts中的showDefaultBar()函数更新问题吗？

【参考方案1】：

在 .ts 文件中，您可以在 showDefaultBar() 函数中执行此操作：

showDefaultBar() 
  this.toggled = false;  <-- add this line
  ...