具有离子搜索栏焦点的离子触发模态打开功能 - 单击不起作用

Question

我有一个ion-searchbar,当点击时,打开一个模态.但是,目前这个click过程实际上是两次点击,一次是聚焦,一次是打开模态.我试图添加点击ion-toolbar它包含在其中,并试图禁用ion-searchbar使用[disabled]="true",但禁用的功能不可用ion-searchbar.如何在不必双击的情况下触发新模态打开,并且在原始搜索栏上不会发生焦点？

HTML

<ion-header>
  <ion-toolbar >
    <ion-searchbar (click)="openSearchModal()"></ion-searchbar>
  </ion-toolbar>
</ion-header>

JS

  openSearchModal() {
    let myModal = this.modalCtrl.create(SearchmodalPage); 
    myModal.present(); 
  }

Answer 1

就像你说的，ion-searchbar没有禁用的功能。

但是您可以创建自己的搜索栏，它将使用离子类来避免对其进行重新编码，并且您将能够禁用它。

在这里查看我的代码：

<ion-header>
   <ion-toolbar>
    <div class="searchbar searchbar-ios searchbar-left-aligned searchbar-active" (click)="openSearchModal()">
      <div class="searchbar-input-container">
        <div class="searchbar-search-icon"></div>
        <input class="searchbar-input" placeholder="Search" type="search" autocomplete="off" autocorrect="off" spellcheck="false" disabled="true">
      </div>
    </div>
  </ion-toolbar>
</ion-header>