使用离子搜索栏的取消按钮关闭模态

Question

我有一个搜索按钮，它打开一个包含 ion-searchbar 的模式，但问题是我不知道如何使用 ionic 默认带来的取消按钮关闭模式。 这是我的代码：

  <ion-header>
    <ion-toolbar color="light">
      <ion-buttons slot="start">
        <ion-button>
          <ion-icon slot="icon-only" name="person-outline"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-buttons slot="primary">
        <!-- THE MODAL -->
        <ion-button  (click)="showModal()">
          <ion-icon slot="icon-only" name="search"></ion-icon>
        </ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>

TS

async showModal() {
    const modal = await this.modalController.create({
      component: SearchModalPage
    });
    return await modal.present();
  }

搜索模式

<ion-header>
    <ion-searchbar showCancelButton="focus"></ion-searchbar>
</ion-header>

<ion-content>

</ion-content>

当我单击搜索栏的取消按钮时，会显示此消息：

[干预] 忽略尝试取消一个带有cancelable=false 的touchstart 事件，例如因为滚动正在进行并且不能被中断。

Answer 1

单击取消按钮时，离子搜索ionCancel有一个方法调用ionCancel ，我只需要在单击时关闭模态。

HTML

<ion-header>
    <ion-searchbar showCancelButton="always" (ionCancel)="close()"></ion-searchbar>
</ion-header>

TS

export class SearchModalPage implements OnInit {

  constructor(private modalCtrl: ModalController) { }

  ngOnInit() {
  }
  close(){
    this.modalCtrl.dismiss({
      'dismissed': true
    });
  }

}