显示取消按钮，直到 ion-searchbar 具有值答案

【问题标题】：Show cancel button until ion-searchbar has value显示取消按钮，直到 ion-searchbar 具有值
【发布时间】：2018-12-07 11:39:21
【问题描述】：

在 Ionic 3 应用程序中，我想显示 ion-searchbar 的取消按钮，直到搜索栏有值。

我的是一个基于选项卡的应用程序，在移动到其他选项卡并返回选项卡时，搜索文本被保留，如果搜索栏中存在文本，我需要取消按钮也可见。但它是不可见的。

<ion-searchbar 
    #projectsearchbar  name="query" (search)="doSearch($event)" [(ngModel)]="global.SearchFilter"  [showCancelButton]="true" cancelButtonText="Cancel" placeholder="Search" (ionCancel)="onSearchCancel($event)" (ionInput)="onInput($event)" (ionBlur)="onInputBlur()" (ionFocus)="onInputFocus()" (ionClear)="onInputClear($event)" >

我尝试获取取消元素并设置样式，但没有成功

  ionViewWillEnter() {
    if (this.global.SearchFilter) {
        let cancelBlurElement = <HTMLElement>document.querySelector(".searchbar-ios .searchbar-ios-cancel");
        cancelBlurElement.style.display = 'block';
    }
  }

还尝试通过类名获取搜索栏控件并添加自定义类，但没有成功。

  ionViewWillEnter() {
    if (this.global.projectSearchFilter) {
       let el=document.getElementsByTagName('ion-searchbar');
        el[0].classList.add('visible-cancel');
    }
  }

  .visible-cancel {
    display: block!important;
  }

也尝试作为视图子导入，

import { Component, Output, NgZone, ViewChild } from '@angular/core';

export class SearchPage {

  @ViewChild('projectsearchbar') searchbar:Searchbar;

  ionViewWillEnter() {
     this.searchbar.setFocus();
  }

}

【问题讨论】：

取消按钮只有在文本存在时才可见？或者取消按钮是否当搜索栏有焦点时也可见？
如果文本存在，需要取消按钮可见。

标签： ionic-framework ionic2 ionic3 ionic-view

【解决方案1】：

我有同样的问题

通过在封装元素中使用这个 CSS sn-p 解决

.encapsulating-element {
  .searchbar-ios-cancel{
    display: none !important;
  }
}

【讨论】：