Ionic 2（使用Angular 2） - 如何访问另一个页面的功能？

Question

我对Ionic和Angular 2相当陌生：

我正在尝试制作一个服务（或提供者在Ionic 2中），它将保存我的全局变量和全局函数。

当我尝试在我的服务文件中导入AlertController和LoadingController（通过在我的服务文件的构造函数上实例化它并调用它的方法），我会收到一个错误，提示“没有AlertController的提供程序”等

所以，我想 - 我可以制作一个名为“CommonFunctions”的页面，我可以用它作为服务/提供者函数的包装 - 这样我就可以将数据函数和UI函数（AlertContorller等）分开）。 See this diagram

我现在得到一个错误，说“没有提供CommonFunctions”。我将CommonFunctions声明为普通页面，但我猜我不能在另一个页面上使用CommonFunctions函数？

所以我目前的选择（即我能想到的是）：

1. 我怎么能叫AlertController/LoadingController（或控制器一样） 在服务/供应商

2. 我怎样才能使用其他页面的功能

3. 如果这些都不可行，我想我必须接受我不能在服务0123上调用AlertController/LoadingController函数（这也意味着很多重复的代码）。

任何帮助非常感谢。

exercise.ts是由用户

import { Component } from '@angular/core'; 
import { NavController, LoadingController } from 'ionic-angular'; 
import { FirebaseListObservable , FirebaseObjectObservable} from 'angularfire2'; 
import { Common } from '../common/common'; 

@Component({ 
    selector: 'page-exercise', 
    templateUrl: 'exercise.html' 
}) 
export class ExercisePage { 

    public FBexercises: FirebaseListObservable<any[]>; 

    constructor(
     public navCtrl: NavController, 
     public loadingCtrl: LoadingController, 
     public common: Common 
    ) { 
    this.getFBexercises(); 
    } 

    getFBexercises(){ 
    let that = this; 

     this.common.getFBLUL().then(function(){ 
     that.exerciseLUL = this.glob_var.exerciseLUL; 
     that.exerciseLUL_backup = this.glob_var.exerciseLUL_backup; 
     that.muscleGroupLUL = this.glob_var.muscleGroupLUL; 
     that.muscleLUL = this.glob_var.muscleLUL; 
    }); 
    } 

    ionViewDidLoad() { 
    console.log('Exercise Page Loaded'); 
    } 


} 

common.ts看到主要就是页面一个页面，但我打算用它来存储我的全球职能

import {Component, Injectable} from '@angular/core'; 
import {GlobalVars} from '../../providers/global-vars'; 
import {NavController, AlertController, LoadingController } from 'ionic-angular'; 

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

@Injectable() 
export class Common { 

    public static navCtrl: NavController 
    public static alertCtrl: AlertController 
    public static loadingCtrl : LoadingController 
    public static globalVars: GlobalVars 

    constructor() { 
    } 
    //creates loading bar 
    createLoadingBar(message){ 
     return this.loadingCtrl.create({ 
      content: message 
     }); 
    } 

    getFBLUL(){ 
     let that = this; 
     return new Promise(function(resolve, reject){ 
       //create loading bar 
      var loadingBar = that.createLoadingBar('Exercise List loading'); 
      loadingBar.present(); 
      that.globalVars.FBexercisesToLUL().then(function(){ 
       loadingBar.dismiss(); 

      //TO-DO, receive exerciseLUL from FBexerciseToLUL() and return it when promise finishes 

       resolve(); 
      }); 
     }); 
    } 
} 

全球增值经销商。 ts是我使用的数据服务，用于从Firebase数据库中获取我的数据

import {Injectable} from '@angular/core'; 
import {AngularFire, FirebaseListObservable } from 'angularfire2'; 
import 'rxjs/add/operator/map' 

@Injectable() 
export class GlobalVars { 

    public muscleGroupLUL = []; 
    public muscleLUL = []; 
    public exerciseLUL = []; 
    public exerciseLUL_backup = []; 

    public FB_exercise: FirebaseListObservable<any[]>; 

    constructor(
    public af: AngularFire 
    ) { 
    this.getFBexercise(); 
    } 

    getFBexercise() { 
    console.log("Getting FB Exercises"); 
    this.FB_exercise = this.af.database.list('/Exercise'); 
    } 

    FBexercisesToLUL() { 
    let that = this; 
    return new Promise(function(resolve, reject){ 
     that.muscleGroupLUL.push(""); 
     that.muscleLUL.push(""); 

     that.FB_exercise.subscribe(exercises => { 
      console.log("Exercises Loaded"); 
      // items is an array 

      exercises.forEach(FBexercise => { 

      var ref = FBexercise.$key; 
       var muscleGroup = FBexercise.body_part_name; 
       var muscle = FBexercise.muscle_name; 
       var exercise = FBexercise.exercise_name; 

      if (that.muscleGroupLUL.indexOf(muscleGroup) === -1) { //if not in LUL 
       that.muscleGroupLUL.push(muscleGroup); 
      } 
       if (that.muscleLUL.indexOf(muscle) === -1) { //if not in LUL 
       that.muscleLUL.push(muscle); 
      } 
      if (that.exerciseLUL.indexOf(exercise) === -1) { //if not in LUL 
       that.exerciseLUL.push({ref:ref, exercise: exercise, muscle : muscle, muscleGroup : muscleGroup}); 
      } 

      }); 

      that.exerciseLUL_backup = that.exerciseLUL; 

     //TO-DO, return exerciseLUL when promise finishes 

      resolve(); 

     }); 
    }); 
    } 
} 

Answer 1

您正在收到此错误，因为您必须在使用它们之前先声明提供者。

有供应商声明的例子：

@NgModule({ 
    ... 
    providers: [ 
     MyService 
    ] 
}) 

服务类应@Injectable()装饰。

@Injectable() 
export class MyService { 
    ... 
} 

然后，您可以将此服务注入到任何组件的构造函数中。

@Component({ 
    ... 
}) 
export class MyComponent { 
    constructor(serviceVariable: MyService) { 
     serviceVariable.someMethod(); 
    } 
}