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

Posted 2023-03-13

【中文标题】ionic 2中多个选项卡中的单个搜索栏过滤项目

【英文标题】：single searchbar filter items in multiple tabs in ionic 2

【发布时间】：2017-11-14 16:51:56

【问题描述】：

我试图在 ionic 2 的 2 个不同选项卡中使用单个搜索栏过滤器列表。我有搜索栏，并且我有一种过滤对象的方法，但我希望能够为用户提供不同的选项卡选择他们想要搜索的内容。例子.. “搜索页面”中有离子搜索栏和离子标签，有 2 个标签（人物和博客）。当用户在搜索栏中输入内容时，它将过滤活动选项卡中的结果。因此，当您第一次进入搜索页面时，它会默认为人员，但随后您可以单击博客选项卡切换到搜索博客。我想在主搜索页面中有一个搜索栏。

这是我目前拥有的..

搜索页面 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 的一些东西，但我在 ionic 方面还不够好，无法弄清楚如何在两个选项卡页面上获得它，并让所有事件和一切都自动在两个选项卡页面上运行。谢谢。

【参考方案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>();

把它放在你的根参数上

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

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

【讨论】：

天哪，这绝对是美丽的！太感谢了！一个简单的问题，EventEmitter 我的 IDE 什么时候会弹出导入选项“@angular/core”、“PouchDB”、“NodeJS”和"events".internal。我尝试使用“@angular/core”，但它告诉我签名需要传入一个参数。

导入来自@angular/core。签名缺失参数可能是指缺失的泛型。我还忘了提到你需要从标签向下发出，所以我会编辑它。