首页 文章

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

提问于
浏览 次
3

我试图在离子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，但我对离子的了解还不够要在两个标签页上都能得到它，并且所有事件都可以在两个标签页上自动运行 . 谢谢 .

javascript angularjs typescript ionic2 filtering

1 回答

  • 2

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

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

    当前导航的父导航是选项卡 . 视图控制器是getActive（），实例是类的实际实例，因此您拥有数据 .

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

data | filter: searchTerm

    2）第二个选项是使用EventEmitters . 我认为它最干净的方式和类之间有更多的分离 .

    在tabs类中创建一个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>

    在每个 class 中，使用navParams并将其分配给searchTerm .

    public searchTerm:string;

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

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

    this.searchEmitter.emit(this.searchTerm);

    第二个问题可能会更长，但肯定更正确 .

    回复于

相关问题