Question

我正在编写一个Ionic应用程序，它有一个“主页”页面，有3个标签。我试图通过在更改搜索词时调用所选选项卡类中的方法，为这些选项卡创建一个搜索栏。这是主页：

<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.
    }
}

当我在主页中创建选项卡时，我在主页构造函数中为它们分配了一个类。模板已经知道那些是tab根。如何访问所选选项卡/页面的实际类实例，并使用其方法？

Answer 1

我找到了解决方案。它实际上不是角度本身的东西，所以这可能只是一种解决方法，但功能齐全。

在主页html中，当我声明我的标签时，我以rootParams的形式传递一个名为“innerInstance”的变量，该变量包含主页对象的实例。由于我为每个选项卡提供了该实例，因此我可以更新主页对类别引用中对实际对象的引用的引用，如下所示：

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

        ...
    }

起初这可能有点令人困惑，但现在对我来说很清楚。如果有人遇到类似问题，请告诉我。

在Ionic 3中，如何调用选项卡类中的方法？

1 个答案: