如何獲取本地存儲數據的服務/組件角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

刪除providers:[AlertService, AuthenticationService]

從 login.component.ts

，並添加所有提供商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); 
}