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

Question

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

<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>

当我点击搜索栏的取消按钮时，会显示以下消息：

[Intervention]忽略取消cancellable=false的触摸启动事件的尝试，例如，因为滚动正在进行且无法中断

Answer 1

当单击取消按钮时，离子搜索栏有一个方法调用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
});
}
}