我是否正确注入/导入了 angular2 服务

Question

我正在尝试构建一个提供程序(离子 2(来存储全局变量(替换$rootScope。

但是我仍然收到一个错误：

./MyApp 类中的错误 MyApp - 内联模板：18：0 导致：没有存储提供程序！

如何清理代码？

global-vars.ts：

import { Injectable } from '@angular/core';
import { Events } from 'ionic-angular';
import { Storage } from '@ionic/storage';
/*
  Generated class for the GlobalVars provider.
  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
    */
  @Injectable()
  export class GlobalVars {
    _vars: Array<{name: string, value: any}>;
    constructor(
        public events: Events,
        public storage: Storage
    ) {
        console.log('Hello GlobalVars Provider');
    }
    varExist(varName: string): boolean {
        // return (this._vars.indexOf(varName) > -1);
        return false;
    };
    addGlobalVar(varName: string, value: any): void {
        this._vars.push({
          name: varName,
          value: value
        });
    };
    removeGlobalVar(varName: string): void {
        
    };
  }

元件：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ComparePage } from '../compare/compare';
import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';
import { LocalStorageService } from 'angular-2-local-storage';
import { GlobalVars } from '../../providers/global-vars';

@Component({
    selector: 'page-weightlevel', 
    templateUrl: 'weightlevel.html',
    providers: [GlobalVars]
})
export class WeightlevelPage {
    name: string;
    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        private localStorageService: LocalStorageService,
        public globalVars: GlobalVars
    ) {
        console.log("Executing Weightlevel.ts");
        this.name = 'Max';
        // this.globalVars.addGlobalVar("isWebIntegration", false);
    }
    @ViewChild(Slides) slides: Slides;
    ionViewDidLoad() {
        console.log('ionViewDidLoad WeightlevelPage');
    }
    // showWeightLevel() {
    //  this.navCtrl.push(WeightlevelPage);
    // }
    // showCompare() {
    //  this.navCtrl.push(ComparePage);
    // }
    goToSlide() {
        this.slides.slideTo(2, 500);
    }
}

app.module.ts：

import { NgModule, ErrorHandler } from '@angular/core';
import { Http } from '@angular/http';
import { TranslateModule, TranslateStaticLoader, TranslateLoader } from 'ng2-translate/ng2-translate';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { LocalStorageModule } from 'angular-2-local-storage';
import { MyApp } from './app.component';
import { WeightlevelPage } from '../pages/weightlevel/weightlevel';
import { RecovolPage } from '../pages/recovol/recovol';
import { ComparePage } from '../pages/compare/compare';
import { GlobalVars } from '../../providers/global-vars';

export function createTranslateLoader(http: Http) {
    return new TranslateStaticLoader(http, 'assets/i18n', '.json');
}

@NgModule({
  declarations: [
    MyApp,
    WeightlevelPage,
    RecovolPage,
    ComparePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot(
      {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    ),
    LocalStorageModule.withConfig({
      prefix: '',
      storageType: 'localStorage'
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    WeightlevelPage,
    RecovolPage,
    ComparePage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, GlobalVars]
})
export class AppModule {}

Answer 1

确保在

模块装饰器的"提供程序"部分包含 GlobalVars：

import { GlobalVars } from 'somehere';
@NgModule({
    providers: [GlobalVars]
})
export class AppModule {}

Answer 2

确保使用命令安装了存储

npm install --save @ionic/storage

并在系统中添加了引用.js配置文件

并将IonicStorageModule导入到您的应用程序模块中

imports: [
    .............
    IonicStorageModule.forRoot()
  ],