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

在离子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)" >

还尝试作为视图子级导入

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

export class SearchPage {

  @ViewChild('projectsearchbar') searchbar:Searchbar;

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

}

---

只有文本存在时，“取消”按钮才可见？或者，当搜索栏有焦点时，取消按钮也可以看到吗？如果文本存在，则需要取消按钮可见。

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

}