單個搜索欄過濾離子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代碼，用於過濾項目等等，我從教程中得到了所有內容在這里我正在考慮使用@ViewChild，但我對離子的了解還不夠要在兩個標簽頁上都能得到它，並且所有事件都可以在兩個標簽頁上自動運行。 謝謝。

Answer 1

我將介紹兩種方式，一種非常簡單，一種更正確。

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>

在每個班級中，使用navParams並將其分配給searchTerm。

public searchTerm:string;

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

searchInput更改時，在選項卡中發出更改

this.searchEmitter.emit(this.searchTerm);

第二個問題可能會更長，但肯定更正確。