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