Показывать кнопку отмены, пока значение ионного поиска - PullRequest
Новая
       29

Показывать кнопку отмены, пока значение ионного поиска

0 голосов
/ 28 июня 2018

В приложении Ionic 3 я хочу показывать кнопку отмены ion-searchbar, пока строка поиска не будет иметь значение.

Mine - приложение, основанное на вкладках, и при переходе на другую вкладку и возвращении на вкладку текст поиска сохраняется, и мне нужно, чтобы кнопка отмены также была видна, если текст присутствует в панели поиска. Но это не видно. 

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

}
...