イオン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

@イヴァロ18の答えは完璧だと思います。

私は彼の反応に従って設定した私の例を補足したいと思います。

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をチェックしてください。