javascript - ionic 2中多个选项卡中的单个搜索栏过滤器项目

Question

我正在尝试在 ionic 2 的 2 个不同选项卡中使用单个搜索栏过滤器列表。我有搜索栏，并且有一种通过对象进行过滤的方法，但我希望能够为用户提供不同的选项卡选择他们要搜索的内容。例子..“搜索页面”中有 ion-searchbar 和 ion-tabs，有 2 个选项卡(People 和 blogs)。当用户在搜索栏中输入内容时，它会过滤事件选项卡中的结果。所以当你第一次进入搜索页面时，它会默认为人，但你可以点击博客标签切换到搜索博客。我希望在主搜索页面中有一个搜索栏。

这是我目前拥有的..

搜索页面 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>

这样一来，我的搜索栏就位于主要位置，因此在选项卡之间切换时无需刷新或重绘。不过，我无法弄清楚如何访问它及其值(value)，以及两个标签页上的 ionInput 事件。我似乎只能在主页上使用它。

我可以发布我目前拥有的所有 TS 代码，用于过滤项目等，我从教程中获得所有这些代码 Here我在想一些关于@ViewChild 的事情，但我对 ionic 还不够好，无法弄清楚如何在两个选项卡页面上获得它，并让所有事件和所有内容在两个选项卡页面上自动工作。谢谢。

Answer 1

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

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

当前导航的父导航是选项卡。它的 View Controller 是 getActive()，实例是该类的实际实例，因此您拥有数据。

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

data | filter: searchTerm

2) 第二种选择是使用 EventEmitter。我认为这是最干净的方式，并且类之间有更多的分离。

在选项卡类中创建一个 EventEmitter

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

把它贴在你的根参数上

  <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);

第二个答案可能更长，但肯定更正确。