在ionic 2中多个选项卡中的单个searchbar过滤器项。

I am trying to have a single searchbar filter lists in 2 different tabs in ionic 2. I have the searchbar, and I have a method of filtering through the objects, but I want to be able to have different tabs for the user to select what they want to search for. Example.. "Search Page" has the ion-searchbar in it and the ion-tabs in it, with 2 tabs (People and blogs). When the user inputs content into the search bar it would filter the results in the active tab. So when you first go to the search page it would default to people, but then you can click the blogs tab to switch to searching blogs. I would like to have a single searchbar in the main search page.

我正在尝试在ionic 2的两个不同的标签中建立一个单独的搜索栏过滤器列表。我有一个searchbar，我有一个过滤对象的方法，但是我想让用户有不同的选项卡来选择他们想要搜索的内容。例子. .“搜索页面”中有离子搜索栏和离子标签，有两个标签(人和博客)。当用户将内容输入搜索栏时，它将过滤活动选项卡中的结果。所以当你第一次进入搜索页面时，它会默认为用户，但是你可以点击blogs选项卡切换到search blog。我希望在主搜索页面中有一个单独的搜索栏。

Here is what I have currently..

这是我目前所拥有的。

SearchPage html...

SearchPage html……

<ion-header text-center>
  <ion-navbar>
    <ion-title>Search Page</ion-title>
  </ion-navbar>
<ion-header>

<ion-searchbar [(ngModel)]="searchTerm" [formControl]="searchControl" (ionInput)="onSearchInput()"></ion-searchbar>
<div *ngIf="searching" class="spinner-container">
  <ion-spinner></ion-spinner>
</div>

<ion-tabs tabsPlacement="top">
  <ion-tab tabIcon="people" [root]="peopleSearch"></ion-tab>
  <ion-tab tabIcon="pricetags" [root]="postsSearch"></ion-tab>
</ion-tabs>

That way I have the search bar in the main place so it doesn't have to refresh or redraw when switching between tabs. I can't figure out though, how to get access to it and it's value, as well as the ionInput event on both of the tab pages. I can only seem to use it on the main page.

这样，我在主位置上就有了搜索栏，这样在切换选项卡时就不需要刷新或重新绘制了。我不知道如何访问它以及它的值，以及两个选项卡页面上的ionInput事件。我似乎只能在主页上使用它。

I can post up all of my TS code that I have thusfar, for filtering the items and such, I am getting it all from a tutorial Here I was thinking something with @ViewChild, but I am not good enough at ionic to figure out how to get that on both tabs pages and have all the events adn everything automatically work on both tabbed pages. Thank you.

我可以把我所有的TS的代码我已经透露出来,过滤等项目,我把它从一个教程与@ViewChild我在想什么,但我不够好离子找出如何让标签页和所有的事件和所有选项卡页面自动工作。谢谢你！

1 个解决方案

#1

I'll present two ways, one very simple, one more correct.

我将介绍两种方法，一种非常简单，另一种更正确。

1) navCtrl.parent.getActive().instance.searchTerm

1)navCtrl.parent.getActive .instance.searchTerm()

The parent nav of your current nav are the tabs. The view Controller of that is getActive() and the instance is the actual instance of the class and so you have the data.

当前导航的父导航是标签。它的视图控制器是getActive()，实例是类的实际实例，因此您拥有数据。

this.tabsInstance = navCtrl.parent.getActive().instance;

data | filter: searchTerm

2) The second option is to use EventEmitters. I think its most clean way and there is more separation between classes.

第二种选择是使用event发射器。我认为这是最干净的方式，班级之间有更多的分离。

Create an EventEmitter in the tabs class

在选项卡类中创建event发射器。

public searchEmitter: EventEmitter<string> = new EventEmitter<string>();

Stick it on your root params

把它贴在你的根上

  <ion-tab [rootParams]="searchEmitter" tabIcon="people" [root]="peopleSearch"></ion-tab>
  <ion-tab [rootParams]="searchEmitter" tabIcon="pricetags" [root]="postsSearch"></ion-tab>

In each class take the navParams and assign it to the searchTerm.

在每个类中获取navParams并将其分配给searchTerm。

public searchTerm:string;

constructor(navParams:NavParams){
      if(navParams)
      navParams.data.subscribe(searchTerm => this.searchTerm = searchTerm);
}

Emit the changes in the tabs when the searchInput changes

当searchInput发生更改时，在选项卡中发出更改

this.searchEmitter.emit(this.searchTerm);

The second answe might be longer but its certainly more correct.

第二种回答可能更长，但肯定更正确。

#1