Как получить данные локального хранилища в сервисе/компоненте угловой 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); 
}