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

     ... 
    } 

起初，这可能是一个有点混乱，但现在对我来说很清楚。如果有人遇到类似问题，请告诉我。