我不能将 Injectable class 作为服务导入吗

Question

我正在使用 Ionic 2 构建应用程序并遇到了问题。任何帮助将不胜感激。

我正在使用名为 plan-data.ts 的服务来获取和 post 数据到 firebase database.The 我遇到的问题运行是当我尝试导入时并在一些特定组件上声明 plan-data.ts 文件，它会出错。在下面的页面上，它工作正常！

    **DASHBOARD.ts**
    import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    import { PlanData } from '../../providers/plan-data/plan-data';

    @Component({
      templateUrl: 'build/pages/dashboard/dashboard.html',
      providers: [PlanData]
    })
    export class DashboardPage {

      constructor(private navCTRL: NavController, public planData: PlanData){
        this.planData = planData;
        this.loadList();
      }
      ...
    }

但是在这个文件上，当我尝试将其导入并声明为 provider 时，它失败并出现错误：Cannot read property 'parameters' of undefined.

    **STOPWATCH.ts**
    import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    import { PlanData } from '../../providers/plan-data/plan-data';

    @Component({
      templateUrl: 'build/pages/watch-calc/watch-calc.html',
      providers: [PlanData]
    })
    export class WatchCalcPage {

      constructor(private navCTRL: NavController, public planData: PlanData) {
        this.planData = planData;
      }

我似乎无法弄清楚第二页上有什么不同或错误，而且似乎找不到任何人遇到这个问题，这意味着可能是我没有看到简单的东西。和建议会很有帮助，谢谢！

Answer 1

I am using a service called plan-data.ts to get and post data to a firebase database

您有意要在每个页面中创建 PlanData class 的新实例吗？通过将它添加到 DashboardPage 和 WatchCalcPage 的提供程序数组中，将为每个页面创建一个 不同的 实例。

为了在整个应用程序中使用同一个实例，您应该在最顶层组件的提供程序数组中包含 PlanData class，如下所示：

@Component({
  templateUrl: 'build/app.html',
  providers: [PlanData, ...]
})
export class MyApp { ... }

然后将其包含在构造函数中

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { PlanData } from '../../providers/plan-data/plan-data';

@Component({
  templateUrl: 'build/pages/watch-calc/watch-calc.html'
})
export class WatchCalcPage {

  constructor(private navCTRL: NavController, public planData: PlanData) {
    // this.planData = planData; <- you don't need to do this; it's done automatically by typescript because it's included as a parameter in the constructor.
  }

我不能将 Injectable class 作为服务导入吗

Can't I import an Injectable class as service

dependency-injection

typescript

hybrid-mobile-app

ionic2

angular