来自另一个控制器的离子2调用功能

时间:2016-12-17 08:35:55

标签: angular typescript ionic2

我需要在function另一个控制器致电 ionic 2,这可能吗?

在我的代码下方,我想在标签控制器中调用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 中我想在标签选择上调用loadPeople功能,我该怎么做?

2 个答案:

答案 0 :(得分:17)

有几种选择。一种方法是将函数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)。

答案 1 :(得分:2)

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

例如:

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

class B{
  classA.f1();
}

希望它能运作