Remove/Close 点击取消按钮时 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

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

上一样

有办法吗？在 Ionic 文档中找不到任何内容。

Answer 1

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

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

Remove/Close 点击取消按钮时 Angular 或 Ionic 5 中的搜索栏

Remove/Close search bar in Angular or Ionic 5 when hitting cancel button

ios

angular

ionic-framework

search

ionic5