离子搜索栏作为选项卡组件 离子 2.

Question

我的 Ionic 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>

我

有四个组件，一个是搜索选项卡，每当单击时，我都想弹出一个搜索栏(离子搜索栏(，它可以在提交时触发功能。

我不知道该怎么做，请建议我。

谢谢。。！！

Answer 1

在选项卡组件中，使用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;
}

Answer 2

我认为您需要使用搜索栏创建另一个页面 - 比如SearchPage组件。

您必须将该选项卡的[root]提供给该组件。

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

在您的标签中 - tab3Root = "SearchPage" .

现在，无论您需要什么搜索功能，都将在此 SearchPage 组件中。有关如何实现搜索栏的信息，请参阅此内容。