サービス/コンポーネント角度2のローカルストレージデータを取得する方法

Question

私はangular2を初めて使用しています。ログイン後にローカルストレージにデータを保存しようとしています。その作業は問題ありません。同じアイテムをローカルストレージから取得できます。他のサービス/コンポーネントにそのローカルストレージを取得する問題があります。ここに私のコードです。

login.serviceでは値を設定しましたが、ログインコンポーネントでは取得できませんでした。何かが私を助けることができるかどうか見てください。

login.service.ts私はここに言うことができるものから、

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map' 
import configApp = require('../_configs/app.settings'); 
//import '../assets/frontend/custom/js/jquery.toaster.config.js'; 
declare function maketoast(status: string, message: string) : void; 


@Injectable() 
export class AuthenticationService { 

constructor(private http: Http) { } 

login(username: string, password: string) { 

    // console.log(configApp.apiUrl+/test); 

    return this.http.post(configApp.apiUrl+"/api/login", JSON.stringify({ username: username, password: password })) 
     .map((response: Response) => { 

      // login successful if there's a jwt token in the response 
      let user = response.json(); 

      console.log(user.status); 
      if(user.status == false){ 

       maketoast(user.toaster_status, user.message); 
       event.stopImmediatePropagation; 
       event.preventDefault(); 
       event.stopPropagation(); 

      } 

      //console.log(user.token); 
      if (user && user.token) { 

       // store user details and jwt token in local storage to keep user logged in between page refreshes 
       localStorage.setItem('currentUser', JSON.stringify(user)); 
       maketoast(user.toaster_status, user.message); 
       console.log(window.localStorage.getItem('currentUser')); 
       event.stopPropagation(); 
      } 
     }); 
} 

    logout() { 
    // remove user from local storage to log user out 
    localStorage.removeItem('currentUser'); 
    } 
} 

login.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 

import { AlertService, AuthenticationService } from '../_services/index'; 
//import { AppSettings,IEnvVars } from '../_configs/app.settings'; 


@Component({ 
    moduleId: module.id, 
    templateUrl: '../templates/login.component.html', 
    providers:[AlertService, AuthenticationService] 
}) 

export class LoginFormComponent implements OnInit { 
    model: any = {}; 
    loading = false; 

constructor(
    private router: Router, 
    private authenticationService: AuthenticationService, 
    private alertService: AlertService) { 

    **please see here** 
    let value: string = localStorage.getItem("currentUser"); 
    console.log(value); 
} 

ngOnInit() { 
    // reset login status 
    this.authenticationService.logout(); 
} 

login() { 

    this.loading = true; 
    this.authenticationService.login(this.model.username,  this.model.password) 
     .subscribe(
      data => { 

       this.router.navigate(['/']); 
      }, 
      error => { 
       this.alertService.error(error); 
       this.loading = false; 
      } 
     ); 
    } 
} 

Answer 1

（私はそう知らせてください）あなたがの両方を持っていますクラスのコンストラクタでこれらが発生した場合、コンポーネントの前にサービスがロードされないことがあります。

Answer 2

その、今働いはい、あなたのlogin.component.tsからproviders:[AlertService, AuthenticationService]

を削除し、コンポーネントにプロバイダ[サービス]を追加した場合、これらのサービスは、再び（複数のインスタンス）をインスタンス化しますmodule

内のすべてのプロバイダを追加

Answer 3

。実際には、グローバル変数を定義し、その変数にローカルストレージデータを格納する必要があります。さらに、コンポーネント内のどこでも使用できます。ありがとう。

public userData: any; 
public userToken: any; 
public userJson:any; 

constructor(
    private router: Router, 
    private authenticationService: AuthenticationService, 
    private alertService: AlertService) { 

    this.userData = localStorage.getItem("currentUser"); 
    this.userJson = JSON.parse(this.userData); 

    if(this.userJson != null) { 

     this.userJson = JSON.parse(this.userData); 
     this.userToken= this.userJson.token; 
     alert(this.userToken); 

    } 



    //console.log(this.userToken.token); 
}