javascript - enkel sökfält filtrerar objekt i flera flikar i ionic 2

Jag försöker ha en enda sökfält som filtrerar listor i 2 olika flikar i Ionic 2. Jag har sökfältet, och jag har en metod för att filtrera objekten, men jag vill kunna ha olika flikar för användaren att välja vad de vill söka efter. Exempel.. "Sök-sida" har ion-searchbar i den och ion-tabs i den, med 2 flikar (Personer och bloggar). När användaren skriver in innehåll i sökfältet skulle det filtrera resultaten i den aktiva fliken. Så när du först går till söksidan skulle det som standard vara personer, men sedan kan du klicka på bloggar-fliken för att byta till att söka i bloggar. Jag skulle vilja ha ett enda sökfält på huvudsidan för sök.

Här är vad jag har för tillfället..

SökSida 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>

På det sättet har jag sökfältet på huvudplatsen så att det inte behöver uppdateras eller ritas om när man byter mellan flikar. Jag kan dock inte lista ut hur man får tillgång till det och dess värde, samt ionInput-händelsen på båda fliksidorna. Jag verkar bara kunna använda det på huvudsidan.

Jag kan posta all min TS-kod som jag har hittills, för att filtrera objekten och sådant, jag får allt från en handledning. Här tänkte jag på något med @ViewChild, men jag är inte tillräckligt skicklig i Ionic för att lista ut hur man får det på båda flik-sidorna och får alla händelser och allt att fungera automatiskt på båda flikade sidorna. Tack.

Svar #1

Jag ska presentera två sätt, ett mycket enkelt, ett mer korrekt.

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

Den överordnade navigeringen till din nuvarande navigering är flikarna. Vy-kontrollern för den är getActive() och instansen är den faktiska instansen av klassen och så har du datan.

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

data | filter: searchTerm

2) Det andra alternativet är att använda EventEmitters. Jag tror att det är det mest rena sättet och det finns mer separation mellan klasser.

Skapa en EventEmitter i flikklassen

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

Sätt det på dina rotparametrar

  <ion-tab [rootParams]="searchEmitter" tabIcon="people" [root]="peopleSearch"></ion-tab>
  <ion-tab [rootParams]="searchEmitter" tabIcon="pricetags" [root]="postsSearch"></ion-tab>

I varje klass, ta navParams och tilldela det till searchTerm.

public searchTerm:string;

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

Sänd ändringarna i flikarna när sökningen ändras

this.searchEmitter.emit(this.searchTerm);

Det andra svaret kan vara längre men det är definitivt mer korrekt.