Question

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

但我仍然收到错误（./MyApp类MyApp中的错误 - 内联模板：18：0导致：没有存储提供商！）

你能帮我清理代码吗？

由于

全局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

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

import { GlobalVars } from 'somehere';

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

Answer 2

确保使用命令

安装了存储

npm install --save @ionic/storage

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

并在AppModule中导入IonicStorageModule

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

我正确地注入/导入angular2服务吗？

2 个答案: