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

Question

我在移动设备上使用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 文档中找不到任何内容。

Answer 1

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

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