离子搜索栏作为选项卡组件 IONIC 2答案

【问题标题】：ion-searchbar as a tab component IONIC 2离子搜索栏作为选项卡组件 IONIC 2
【发布时间】：2017-08-27 22:02:51
【问题描述】：

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

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

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

谢谢你..!!

【问题讨论】：

您需要一个带有搜索标签的新页面吗？
不，我希望弹出搜索栏

标签： angular ionic2

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

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

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

现在，无论您需要什么搜索功能，都将在这个 SearchPage 组件中。搜索栏的实现方法请参考this。

【讨论】：