イオン-検索バーIONIC 2

Question

マイイオン2アプリケーションは5つのタブを持っている： -

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="ios-blicon-home" ></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="Categories" tabIcon="ios-blicon-category"></ion-tab> 
    <ion-tab tabTitle="Search" tabIcon="ios-blicon-search" (click)="startsearch()"></ion-tab> 
    <ion-tab [root]="tab4Root" tabTitle="Bookmark" tabIcon="ios-blicon-bookmark"></ion-tab> 
    <ion-tab [root]="tab5Root" tabTitle="Me" tabIcon="ios-blicon-me"></ion-tab> 
</ion-tabs> 

私は4つの成分を持っている、もう1つは、私がseachbar（イオン-検索バーをポップする検索]タブで）をクリックすると、それは送信時に関数をトリガーすることができます。

私はこれを行う方法がわかりません、私にお勧めします。

ありがとうございます！

Answer 1

、コンポーネント側では代わりにclick

<ion-tabs> 
    <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="ios-blicon-home" ></ion-tab> 
    <ion-tab [root]="tab2Root" tabTitle="Categories" tabIcon="ios-blicon-category"></ion-tab> 
    <ion-tab tabTitle="Search" tabIcon="ios-blicon-search" (ionSelect)="startsearch()"></ion-tab><!-- use ionSelect --> 
    <ion-tab [root]="tab4Root" tabTitle="Bookmark" tabIcon="ios-blicon-bookmark"></ion-tab> 
    <ion-tab [root]="tab5Root" tabTitle="Me" tabIcon="ios-blicon-me"></ion-tab> 
</ion-tabs> 
<ion-searchbar *ngIf="showSearch"></ion-searchbar> 

のionSelectイベントを使用するには、クラス変数を持っている：

showSearch:boolean=false; 
startsearch(){ 
this.showSearch = ! this.showSearch; 
} 

Answer 2

検索バーを使用して別のページを作成する必要があると思われます（例：SearchPage）。

そして、そのタブに[root]をそのコンポーネントに付ける必要があります。

<ion-tab [root]="tab3Root" tabTitle="Search" tabIcon="ios-blicon-search"></ion-tab> 

あなたのtabs.ts - tab3Root = "SearchPage"で。

ここで必要な検索機能は、このSearchPageコンポーネントにあります。検索バーの実装方法については、thisを参照してください。あなたのタブコンポーネントで