複数のタブの単一検索バーの項目をイオン2で表示する

Question

私は検索バーを2つ持っています。検索バーがあり、オブジェクトをフィルタリングする方法がありますユーザーが検索対象を選択するためのさまざまなタブを持つことができます。例.. "検索ページ"にはイオンタブとその中にイオンタブがあり、タブは2つ（人とブログ）あります。ユーザーが検索バーにコンテンツを入力すると、アクティブなタブの結果がフィルタリングされます。だから、最初に検索ページに行くときには、人々にデフォルトになりますが、あなたはブログを検索するに切り替えるには、ブログのタブをクリックすることができます。メインの検索ページに1つの検索バーがあります。ここで

は、それが時にリフレッシュまたは再描画する必要はありませんので、私はメインの場所に検索バーを持っているその方法は

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イベントを理解することはできません。私はメインページでしか使用できないようです。

私はthusfar、アイテムなどをフィルタリングするために、私は私が@ViewChildで何かを考えていたチュートリアルHere からそれをすべて取得していましたが、私はでは十分ではないよというのが私のTSコードのすべてを投稿することができます両方のタブページでそれをどうやって取得し、すべてのイベントを両方のタブ付きページで自動的に処理するかを把握することができます。ありがとうございました。

Answer 1

私は2つの方法を提示します.1つは非常に単純なもの、もう一つは正しいものです。

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

あなたの現在のNAVの親ナビゲーションタブです。 View ControllerはgetActive（）で、インスタンスはクラスの実際のインスタンスなので、データがあります。

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

data | filter: searchTerm 

2）第2のオプションは持つEventEmitterを使用することです。私はその最もクリーンな方法とクラス間の分離があると思います。各クラスで

スティックに

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

タブクラスでそれを持つEventEmitterを作成し、あなたのルートのparamsの

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

navParamsを取ると、検索語に割り当てます。

public searchTerm:string; 

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

searchInputが

this.searchEmitter.emit(this.searchTerm); 

を変更するときに、第2 answeは長くなりますが、その確かに、より正確かもしれないタブの変更を発します。