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

Question

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

但我仍然收到错误：

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

如何清理代码？

全局变量.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

确保在模块装饰器的“providers”部分中包含 GlobalVars：

import { GlobalVars } from 'somehere';

@NgModule({
    providers: [GlobalVars]
})
export class AppModule {}

Answer 2

确保您使用命令安装了 Storage

npm install --save @ionic/storage

并在您的 system.js 配置文件中添加参考

并将IonicStorageModule 导入到您的 AppModule 中

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