單個搜索欄過濾項目在離子2中的多個標籤2

我試圖讓一個搜索欄過濾器在離子2中的2個不同標籤中列出。我有搜索欄，並且我有一個通過對象過濾的方法，但我想要能夠爲用戶提供不同的選項卡來選擇他們想要搜索的內容。示例.. 「搜索頁面」中包含離子搜索欄和其中的離子選項卡，包含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的東西，但我不夠好以瞭解如何在兩個標籤頁上獲取該標籤，並且將所有事件和所有事件都自動應用到兩個標籤頁上。謝謝。

來源

2017-06-13 Neglected Sanity

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

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

把它貼在你的根PARAMS

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

第二answe可能會更長，但它肯定是比較正確的。

來源

2017-06-13 06:56:01 misha130

哦，我的，那絕對是美麗的！非常感謝！一個簡單的問題是，我的IDE何時會彈出導入選項「@ angular/core」，「PouchDB」，「NodeJS」和「events」.internal'。我嘗試使用「@ angular/core」，但它告訴我簽名需要傳入一個參數。 –

導入來自@ angular/core。缺少簽名的參數可能涉及遺漏的泛型。我也忘了提及你需要從標籤中發出，所以我會編輯它。 – misha130

單個搜索欄過濾項目在離子2中的多個標籤2

回答

相關問題