angle2サービスを正しく注入/インポートしていますか？

Question

グローバル変数を格納するプロバイダ（ionic 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

モジュールデコレータの "プロバイダ" セクションにGlobalVarsを含めるようにしてください：

import { GlobalVars } from 'somehere'; 

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

Answer 2

がインストールさを確認してくださいコマンドを使用したスト​​レージ

npm install --save @ionic/storage 

と

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