Question

我的Ionic 2 App有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>

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

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

谢谢.. !!

Answer 1

在标签组件中，使用compile 'com.github.marcohc:robotocalendarview:<release>'事件代替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>

Answer 2

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

您必须将该标签的[root]提供给该组件。

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

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

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

ion-searchbar作为标签组件IONIC 2

2 个答案: