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

我试图获取取消元素并设置样式,但它不起作用

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

还尝试导入为view child,

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

export class SearchPage {

  @ViewChild('projectsearchbar') searchbar:Searchbar;

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

}