如何在离子2应用程序中单击并查看搜索栏

Question

如何编码离子2应用程序中的单击和查看搜索栏.在那个搜索图标中,首先显示搜索图标,当我点击搜索图标时,搜索栏将显示.

Answer 1

TS

export class Page1{
    public toggled: boolean = false;

    constructor() {
       this.toggled = false;
    }

    public toggle(): void {
       this.toggled = !this.toggled;
    }
}

HTML

<div>
    <ion-icon *ngIf="!toggled" (click)="toggle()" name="search"></ion-icon>
    <ion-searchbar
       *ngIf="toggled"
       [(ngModel)]="someValue"
       (ionInput)="searchThis($event)"
       (ionCancel)="cancelSearch($event)"
       (ionClear) = "cancelSearch($event)"
       [showCancelButton]="true">
    </ion-searchbar>
</div>

在您的cancelSearch()电话中this.toggle(),您可以再次显示该图标.