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

Question

我对 Ionic 和 Angular 2 很陌生：

我试图创建一个服务（或 Ionic 2 中的提供者），它将保存我的全局变量和全局函数。

当我尝试在我的服务文件中导入 AlertController 和 LoadingController（通过我的服务文件的构造函数实例化它并在我的服务文件的一个函数上调用它的方法）时，我会收到一条错误消息，提示“No Provider for AlertController”等。

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

我现在收到一条错误消息，提示“No Provider for CommonFunctions”。我将 CommonFunctions 声明为普通页面，但我猜我不能在另一个页面上使用 CommonFunctions 函数？

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

1. 如何调用 AlertController/LoadingController（或类似的控制器） 在服务/提供者中

2. 如何使用其他页面的功能

3. 如果这些都不可能，我想我只能接受我 无法在服务上调用 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();
            });
        });
    }
}

global-vars.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();
    }
}