显示取消按钮，直到离子搜索栏有价值为止

Question

在Ionic 3应用程序中，我想显示离子搜索栏的取消按钮，直到搜索栏具有值为止。

我的是基于标签的应用程序，移动到其他标签并返回到标签时，搜索文本将被保留，并且如果搜索栏中存在文本，我还需要取消按钮才能显示。但这是不可见的。

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

我试图获取cancel元素并设置样式，但是没有用

  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();
  }

}