单个搜索栏过滤项目在离子2中的多个标签2

Question

我试图让一个搜索栏过滤器在离子2中的2个不同标签中列出。我有搜索栏，并且我有一个通过对象过滤的方法，但我想要能够为用户提供不同的选项卡来选择他们想要搜索的内容。示例.. “搜索页面”中包含离子搜索栏和其中的离子选项卡，包含2个选项卡（人员和博客）。当用户将内容输入到搜索栏时，它会过滤活动选项卡中的结果。所以当你第一次去搜索页面时，它会默认为人，但是你可以点击博客标签切换到搜索博客。我想在主搜索页面中有一个搜索栏。

这是我目前有..

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> 

这样，我在主要场所的搜索栏，这样就不必刷新或重绘时在标签之间切换。我无法弄清楚，如何访问它以及它的价值，以及这两个标签页上的ionInput事件。我似乎只能在主页上使用它。

我可以发布我所有的TS代码，因此过滤项目等，我从教程中得到它全部Here 我正在考虑与@ViewChild的东西，但我不够好以了解如何在两个标签页上获取该标签，并且将所有事件和所有事件都自动应用到两个标签页上。谢谢。

Answer 1

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

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

你目前的资产净值的母公司的资产净值是标签。该视图的控制器是getActive（），实例是该类的实际实例，因此您拥有数据。

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

data | filter: searchTerm 

2）第二个选项是使用EventEmitters。我认为它是最简洁的方式，并且在类之间有更多的分离。

在标签类创建EventEmitter

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

把它贴在你的根PARAMS

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

在每一类采取navParams，并将其分配给SEARCHTERM。

public searchTerm:string; 

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

散发出标签中的变化的时候，searchInput改变

this.searchEmitter.emit(this.searchTerm); 

第二answe可能会更长，但它肯定是比较正确的。