来自另一个控制器的 ionic 2 调用函数答案

【问题标题】：ionic 2 call function from another controller来自另一个控制器的 ionic 2 调用函数
【发布时间】：2017-05-02 23:36:25
【问题描述】：

我需要在ionic 2 的另一个控制器 中调用 function，可以吗？

在我的代码下方，我想在标签控制器中调用loadPeople。

home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import {PeopleService} from '../../providers/people-service/people-service';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,public peopleService: PeopleService) {
   this.loadPeople();
  }

 loadPeople(){
  this.peopleService.load()
  .then(data => {
  this.people = data;
  });
 }

}

tabs.ts

import { Component } from '@angular/core';

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor() {

  }
}

在 tabs.ts 我想在 tab selected 上调用 loadPeople 函数，我该怎么做？

【问题讨论】：

你能分享一些代码吗？
我从github.com/driftyco/ionic2-starter-tabs开始
能否请您添加有关该功能及其作用的更多详细信息？因为最好的方法是创建一个共享服务并将该方法放在那里，这样您就可以从任何地方调用它。它在您的应用环境中有意义吗？
我已经更新了我的问题
不确定是否要从另一个控制器调用。为什么不直接在标签中的ionViewDidEnter() 生命周期挂钩中调用loadPeople()？

标签： angular typescript ionic2

【解决方案1】：

有多种选择。一种方法是将您的函数loadPeople() 放入service class，它可以从所有组件访问。

另一种方式是使用Ionic Events来触发组件之间的函数调用。例如，如果一个选项卡的选择调用了一个函数tabSelected()，你可以在这个函数中触发一个事件：

tabSelected() {
  this.events.publish('functionCall:tabSelected', anyAdditionalData);
}

并在home.ts 中收听它，如果事件已被触发，则调用loadPeople()：

this.events.subscribe('functionCall:tabSelected', eventData => { 
  this.loadPeople();
});

您甚至可以通过事件发送数据（此处：anyAdditionalData）。

【讨论】：

【解决方案2】：

您需要做的就是将函数定义为static并使用类名调用该函数。

例如：

class A{
 static f1(){
  console.log("funtion1");
 }
}

class B{
  classA.f1();
}

希望能成功

【讨论】：