Ionic 2离子搜索栏showCancelButton不能在Android上工作

问题描述：

我正在使用Ionic2。Ionic 2离子搜索栏showCancelButton不能在Android上工作

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，但它不会似乎尚未解决，并想知道是否有人有工作？

谢谢

你就可以开始在Android版本打字。它应该显示然后..检查文档中的演示..http：//ionicframework.com/docs/api/components/searchbar/Searchbar/ –

这是你的意思：$ android版本 android命令不再可用。 – Richard

no ..在android搜索栏中开始输入......它显示'X'图标 –

答

取消按钮是在输入域左侧的后退箭头图标，这是相当混乱，让我开始为好，这里是演示中，我已经建立在这里你可以看到它的工作：

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

组件：

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

DEMO

答

Android上没有“CancelButton”。

您可以在官方库上自行查阅：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不相似。

As @ Und3rTow表示，取消按钮是android上左侧的后退箭头。 –

Ionic 2离子搜索栏showCancelButton不能在Android上工作

相关推荐