離子搜索欄作爲選項卡組件IONIC 2

我的離子2應用由具有5個選項卡： -離子搜索欄作爲選項卡組件IONIC 2

<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>

我有四個組分和一種是我要彈出一個seachbar搜索標籤（離子搜索欄）無論何時點擊，它可以觸發提交功能。

我不知道如何做到這一點，請給我建議。

謝謝.. !!

來源

2017-04-03 Sanny Srivastava

你需要搜索標籤了新的一頁？ –

不，我正在尋找一個彈出式搜索欄 –

於您的標籤組件，使用ionSelect事件，而不是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>

在組件端有一個類變量：

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

來源

2017-04-03 07:13:45

我認爲你需要創建另一個頁面與搜索欄 - 說SearchPage組件。

而且您必須將該選項卡的[root]賦予該組件。

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

在你tabs.ts - tab3Root = "SearchPage"。

現在，無論您需要什麼搜索功能，都將在此SearchPage組件中。有關如何實現搜索欄，請參閱this。

來源

2017-04-03 06:40:47

離子搜索欄作爲選項卡組件IONIC 2

回答

相關問題