ionic 2 응용 프로그램에서 검색 막대를 클릭하고보기하는 방법

Question

ionic 2 응용 프로그램에서 클릭 및보기 검색 막대를 코딩하는 방법. 그 중 하나에서 검색 아이콘이 먼저 표시됩니다. 검색 아이콘을 클릭하면 검색 막대가 표시됩니다.

Answer 1

TS에서

export class Page1{ 
    public toggled: boolean = false; 

    constructor() { 
     this.toggled = false; 
    } 

    public toggle(): void { 
     this.toggled = this.toggled ? false : true; 
    } 
} 

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()를 호출 할 수 있습니다.

Answer 2

@ Ivaro18의 답변이 완벽하다고 생각합니다.

본인의 답변에 따라 설정 한 예를 보완하고 싶습니다.

home.ts

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    toggled: boolean; 
    searchTerm: String = ''; 
    items: string[]; 

    constructor(public navCtrl: NavController, public navParams: NavParams) { 
     this.toggled = false; 
     this.initializeItems();   
    } 

    ionViewDidLoad() { 
     console.log('ionViewDidLoad HomePage'); 
    } 

    toggleSearch() { 
     this.toggled = this.toggled ? false : true; 
    } 

    initializeItems() { 
     this.items = ['Amsterdam','Bogota','Mumbai','San José','Salvador']; 
    }  

    triggerInput(ev: any) { 
     // Reset items back to all of the items 
     this.initializeItems(); 
     // set val to the value of the searchbar 
     let val = ev.target.value; 
     // if the value is an empty string don't filter the items 
     if (val && val.trim() != '') { 
      this.items = this.items.filter((item) => { 
      return (item.toLowerCase().indexOf(val.toLowerCase()) > -1); 
      }) 
     } 
    } 
} 

home.html을

<ion-header> 
    <ion-navbar color="primary"> 
    <button *ngIf="!toggled" ion-button icon-only menuToggle><ion-icon name="menu"></ion-icon></button> 
    <!-- Title --> 
    <ion-title *ngIf="!toggled">In&iacute;cio</ion-title> 
    <!-- Search Bar --> 
    <ion-searchbar *ngIf="toggled" [(ngModel)]="searchTerm" [showCancelButton]="true" (ionCancel)="toggleSearch()" (ionInput)="triggerInput($event)"></ion-searchbar> 
    <!-- Search Icon -->  
    <ion-buttons end *ngIf="!toggled"> 
     <button ion-button icon-only (click)="toggleSearch()"><ion-icon name="search"></ion-icon></button> 
    </ion-buttons> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 

<ion-list> 
    <ion-item *ngFor="let item of items"> 
    {{ item }} 
    </ion-item> 
</ion-list> 
</ion-content> 

더 많은 정보 : 자세한 내용은 의 API docs를 확인하십시오.