Ionic 2 ion-searchbar showCancelButton在Android中不起作用

Question

我正在使用Ionic2。

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3 Build version 8E162

我无法让ion-searchbar使用Android平台上的showCancelButton按钮显示取消。

  <ion-searchbar  [showCancelButton]="true" class="ion-searchtext" id="ion-searchtext" [(ngModel)]="searchQueryText" (change)="onChangeText($event)" (ionClear)="onCancelText($event)" (ionInput)="onInputText($event)" placeholder="Keyword Search" debounce="1"></ion-searchbar>

的iOS

的Android

同一问题已报告here，但它似乎尚未得到解决，并且想知道是否有人有解决方法？

由于

Answer 1

取消按钮是输入字段左侧的后退箭头图标，它非常令人困惑，最初也是我，这里是我创建的演示，你可以看到它工作：

  <ion-toolbar>
    <ion-searchbar
      [(ngModel)]="searchString" 
      [showCancelButton]="showSearchCancelButton"
      (ionInput)="searchStuff(searchString)"
      (ionCancel)="onCancelSearch()">
    </ion-searchbar>
  </ion-toolbar>

成分：

  ...
  onCancelSearch(): void {
    alert('cancel clicked');
  }
  ...

DEMO

Answer 2

没有＆＃34; CancelButton＆＃34;在Android上。

您可以自行查看：searchbar.ts在官方存储库中。

  /**
   * @hidden
   * Show the iOS Cancel button on focus, hide it offscreen otherwise
   */
  positionCancelButton() {
    if (!this._cancelButton || !this._cancelButton.nativeElement) {
      return;
    }
    let showShowCancel = this._sbHasFocus;
    if (showShowCancel !== this._isCancelVisible) {
      let cancelStyleEle = this._cancelButton.nativeElement;
      let cancelStyle = cancelStyleEle.style;
      this._isCancelVisible = showShowCancel;
      if (showShowCancel) {
        cancelStyle.marginRight = '0';
      } else {
        let offset = cancelStyleEle.offsetWidth;
        if (offset > 0) {
          cancelStyle.marginRight = -offset + 'px';
        }
      }
    }
  }

Android和IOS不相似。