Question

我试图在离子2中的2个不同选项卡中有一个搜索栏过滤器列表。我有搜索栏，我有一个过滤对象的方法，但我希望能够为用户提供不同的选项卡选择他们想要搜索的内容。例.. ＆＃34;搜索页面＆＃34;其中有离子搜索栏和其中的离子标签，有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>();

坚持你的根障碍

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

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

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

1 个答案: