在Ionic 3中，如何調用標籤類中的方法？

Question

我正在編寫一個帶有3個選項卡的「主頁」頁面的Ionic應用程序。我試圖通過在搜索項更改時調用選定選項卡類中的方法來爲這些選項卡提供搜索欄。這是主頁：

<ion-header> 
    <ion-navbar> 
     <ion-title>{{title}}</ion-title> 
     <ion-buttons end> 
      <button [hidden]="title != 'Meu Cadastro'" ion-button color="dark" (click)="logout()"> 
       <ion-icon name="log-out"></ion-icon> 
      </button> 
     </ion-buttons> 
    </ion-navbar> 
    <ion-toolbar> 
     <ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredItems()"></ion-searchbar> 
    </ion-toolbar> 
</ion-header> 
<ion-content > 
    <ion-tabs #homeTabs> 
     <ion-tab [root]="tabAten" tabTitle="Atendimentos" [rootParams]="innerInstance" tabIcon="construct"></ion-tab> 
     <ion-tab [root]="tabEquip" tabTitle="Equipamentos" [rootParams]="innerInstance" tabIcon="build"></ion-tab> 
     <ion-tab [root]="tabCad" tabTitle="Meu Cadastro" [rootParams]="innerInstance" tabIcon="contact"></ion-tab> 
    </ion-tabs> 

</ion-content> 

import { Component, ViewChild } from '@angular/core'; 
import { NavController, AlertController, Tabs } from 'ionic-angular'; 
import { NativePageTransitions, NativeTransitionOptions } from "@ionic-native/native-page-transitions"; 

import { AtendimentosPage } from "../home/atendimentos/atendimentos"; 
import { EquipamentosPage } from "../home/equipamentos/equipamentos"; 
import { MeuCadastroPage } from "../home/meu_cadastro/meu_cadastro"; 

var instance: any; 

@Component({ 
selector: 'page-home', 
templateUrl: 'home.html' 
}) 

export class HomePage { 

title: String; 

@ViewChild('homeTabs') tabs: Tabs; 

tabAten: any; 
tabEquip: any; 
tabCad: any; 

searchTerm: string = ''; 

innerInstance: any; 

constructor(public navCtrl: NavController 
    , private alertCtrl: AlertController 
    , private nativePageTransitions: NativePageTransitions) { 
    instance = this; 
    this.innerInstance = this; 
    this.tabAten = AtendimentosPage; 
    this.tabEquip = EquipamentosPage; 
    this.tabCad = MeuCadastroPage; 
} 

setTitle(title: String) { 
    this.title = title; 
} 

setFilteredItems() { 

    switch (this.tabs._getSelectedTabIndex()) { 
     //THIS is where I'm trying to call the method inside the 1st tab. The setFilteredItems() method is called whenever the search bar receives new text from the user. 
     case 0: this.tabAten.filterItems(this.searchTerm); 
      break; 
     case 1: this.tabEquip.filterItems(this.searchTerm); 
      break; 
     default: break; 
    } 
} 

這裏是標籤類：

<ion-content> 
    <ion-list> 
     <ion-item *ngFor="let a of atendimentos; let i = index" (click)="showDetails(i)"> 
      <div *ngIf="a.status != 'Concluído'"> 
       <!-- This is where data for each list item is displayed --> 
      </div> 
     </ion-item> 
    </ion-list> 
</ion-content> 

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 

import { AtendimentoPage } from "../atendimentos/atendimento/atendimento"; 

import { Atendimento } from "../../../models/atendimento"; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'atendimentos.html' 
}) 

export class AtendimentosPage { 

    options: NativeTransitionOptions; 
    atendimentos: Array<Atendimento>; 
    homeInstance: any; 

    ionViewWillEnter() { 
     this.homeInstance.setTitle("Atendimentos"); 
    } 

    constructor(public navCtrl: NavController 
     , private navParams: NavParams 
     , private http: Http 
     , private nativePageTransitions: NativePageTransitions) { 
     this.homeInstance = navParams.data; 
     this.atendimentos = new Array<Atendimento>(); 

     this.getAtendimentos(); // Method that does a web call to get array of objects, those will be filtered by the search bar. 
    } 

    public filterItems(searchTerm) { 
     //THIS is the method that I want to call from the home page. 
    } 
} 

當我創建我的主頁選項卡，我給你在他們的主頁構造函數的類。該模板已經知道這些是製表符。我如何訪問選定選項卡/頁面的實際類實例，並使用它的方法？

Answer 1

我找到了解決方案。它實際上不是來自角度本身的東西，所以這可能只是一種解決方法，而是一種功能完善的方法。

在主頁html中，當我聲明我的選項卡時，我傳遞一個名爲「innerInstance」的變量作爲rootParams，它包含主頁對象的一個​​實例。因爲我有可用的情況下爲每個標籤，我可以更新網頁的從一個類中引用的標籤引用到實際對象，像這樣：

constructor(public navCtrl: NavController 
     , private navParams: NavParams 
     , private http: Http 
     , private nativePageTransitions: NativePageTransitions) { 


     //Here I call the homepage instance and assign a new value to this tab's reference 
     this.homeInstance = navParams.data; 


     this.atendimentos = new Array<Atendimento>(); 

     ... 
    } 

起初，這可能是一個有點混亂，但現在對我來說很清楚。如果有人遇到類似問題，請告訴我。