NgxLocalStorage Ne Retrieve Valeur

Question

J'apprends comment utiliser Visual Studio 2017 SPA Modèle de angulaire 2.

Pour cet exercice, je voudrais juste mon HomeComponent pour afficher le nom de l'utilisateur connecté stocké dans stockage local (NgxLocalStorage) après la connexion sur mon AppLoginComponent. https://www.npmjs.com/package/ngx-localstorage

J'ai étudié ce problème et je crois que je suis sur la bonne voie, mais pour une raison quelconque, mon HomeComponent ne voit pas la paire clé/valeur dans localStorage. Cependant, je peux le voir dans les outils de développement de Chrome après l'avoir défini dans login().

NgxLocalStorage a une méthode appelée get, not getItem mais il semble fonctionner de la même manière que getItem. Malheureusement, il ne récupère pas ma valeur.

Je suis assez nouveau pour 2 Angulaire, je suis sûr que je suis juste manque quelque chose quelque part, s'il vous plaît aider.

J'ai importé NgxLocalStorageModule en NgModule dans app.module.shared:

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { NgxLocalStorageModule } from 'ngx-localstorage'; 

import { AppComponent } from './components/app/app.component'; 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HomeComponent } from './components/home/home.component'; 
import { AppLoginComponent } from './components/applogin/applogin.component'; 
import { FacebookService, FacebookModule } from 'ngx-facebook/dist/esm/index'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     HomeComponent, 
     AppLoginComponent 
    ], 
    imports: [ 
     CommonModule, 
     HttpModule, 
     FormsModule, 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'applogin', component: AppLoginComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]), 
     FacebookModule.forRoot(), 
     NgxLocalStorageModule.forRoot() 
    ], 
    providers: [FacebookService, NgxLocalStorageModule] 
}) 
export class AppModuleShared { 
} 

Dans mon HomeComponent je:

import { Component } from '@angular/core'; 
import { LocalStorageService } from 'ngx-localstorage'; 

@Component({ 
    selector: 'home', 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent { 
    currentUser: string; 

    constructor(private localStorage: LocalStorageService) { 
     this.currentUser = JSON.parse(localStorage.get('currentUser') || ''); 
    } 
} 

Dans AppLoginComponent J'ai:

import { Component, NgZone } from '@angular/core'; 
import { FacebookService, InitParams, LoginResponse } from 'ngx-facebook/dist/esm/index'; 

import { LocalStorageService } from 'ngx-localstorage'; 

@Component({ 
    selector: 'applogin', 
    templateUrl: './applogin.component.html' 
}) 
export class AppLoginComponent { 

    public loggedIn = false; 
    name = ""; 

    constructor(private _ngZone: NgZone, private fb: FacebookService, localStorage: LocalStorageService) { 

     let initParams: InitParams = { 
      appId: '123456789', 
      xfbml: true, 
      version: 'v2.8' 
     }; 

     fb.init(initParams); 
    } 

    login() { 
     var self = this; 
     this.fb.login() 
      .then((res: LoginResponse) => { 
       if (res.authResponse) { 
        this.fb.api('/me') 
          .then((res: any) => { 
           self._ngZone.run(() => { 
           self.name = res.name; 
           self.loggedIn = true; 
           localStorage.setItem('currentUser', res.name); 
         }); 
        }); 
       } else { 
        alert('Not authorized.'); 
       } 
      }) 
      .catch(); 
    } 

Answer 1

J'ai créé plunker où tout fonctionne. Vous appuyez sur le bouton de connexion, il accédez à différents composants et spectacle utilisateur dans la console la seule différence à partir du code i utilisé

this.localStorage.set('item', item); 
and this.localStorage.get('item'); 

également dans votre code

this.fb.api('/me') 
         .then((res: any) => { 
          self._ngZone.run(() => { 
          self.name = res.name; 
          self.loggedIn = true; 
          localStorage.setItem('currentUser', res.name); 
        }); 
       }); 

vous ne pouvez pas utiliser comme ces services à l'extérieur constructeur et ne pas utiliser soi-même, vous devez ajouter 'ceci'. et vous préfixe constructeur localStorage avec privé et faire mieux dans l'initialisation crochet OnInit.

import { Component, NgZone, OnInit } from '@angular/core'; 
import { FacebookService, InitParams, LoginResponse } from 'ngx-facebook/dist/esm/index'; 

import { LocalStorageService } from 'ngx-localstorage'; 

@Component({ 
    selector: 'applogin', 
    templateUrl: './applogin.component.html' 
}) 
export class AppLoginComponent implements OnInit { 

    public loggedIn = false; 
    name = ""; 

    constructor(private _ngZone: NgZone, private fb: FacebookService, private localStorage: LocalStorageService) { 


    } 

    ngOnInit() { 
    let initParams: InitParams = { 
      appId: '123456789', 
      xfbml: true, 
      version: 'v2.8' 
     }; 

     fb.init(initParams); 
    } 

    login() { 
     this.fb.login() 
      .then((res: LoginResponse) => { 
       if (res.authResponse) { 
        this.fb.api('/me') 
          .then((res: any) => { 
           this._ngZone.run(() => { 
           this.name = res.name; 
           this.loggedIn = true; 
           this.localStorage.set('currentUser', res.name); 
         }); 
        }); 
       } else { 
        alert('Not authorized.'); 
       } 
      }) 
      .catch(); 
    } 

et app.module.shared.ts supprimez cette ligne

providers: [FacebookService, NgxLocalStorageModule] 

la cause est forRoot les importe déjà.devrait être comme ça

@NgModule({ 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     HomeComponent, 
     AppLoginComponent 
    ], 
    imports: [ 
     CommonModule, 
     HttpModule, 
     FormsModule, 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
      { path: 'applogin', component: AppLoginComponent }, 
      { path: '**', redirectTo: 'home' } 
     ]), 
     FacebookModule.forRoot(), 
     NgxLocalStorageModule.forRoot() 
    ] 
}) 
export class AppModuleShared { 
} 

et le dernier

import { FacebookService, FacebookModule } from 'ngx-facebook/dist/esm/index'; 

essayer d'utiliser l'importation sans dist

import { FacebookModule } from 'ngx-facebook'; 

Answer 2

Le L'entrée doit être une chaîne. Vous pouvez mettre dans certaines données fictives comme

localStorage.setItem('currentUser', 'TrevorBrooks'); 

et de le récupérer par obtenir pour être sûr qu'il ya un élément enregistré. Et vérifiez quel type de données vous envoyez. Est-ce un objet utilisateur ou est-ce juste le nom?

Salutations

Answer 3

1.Vérifiez que vous avez installé le module de stockage local de NPM

npm install --save angular2-localstorage 

2.Im le port du WebStorageModule dans votre module d'application:

import {Component} from "angular2/core"; 
import {WebStorageModule, LocalStorageService} from "angular2-localstorage"; 

@NgModule({ 
    import: [WebStorageModule] 
@Component({ 
    providers: [LocalStorageService] 
}) 
export class AppModule {} 

2.Utilisez le décorateur LocalStorage

import {LocalStorage, SessionStorage} de "angular2-localStorage/WebStorage";

class MySuperComponent { 
    @LocalStorage() public lastSearchQuery:Object = {}; 
    @LocalStorage('differentLocalStorageKey') public lastSearchQuery:Object = {}; 
} 

Exemple

@Component({ 
    selector: 'app-login', 
    template: ` 
<form> 
    <div> 
     <input type="text" [(ngModel)]="username" placeholder="Username" /> 
     <input type="password" [(ngModel)]="password" placeholder="Password" /> 
    </div> 

    <input type="checkbox" [(ngModel)]="rememberMe" /> Keep me logged in 

    <button type="submit">Login</button> 
</form> 
    ` 
}) 
class AppLoginComponent { 
    //here happens the magic. `username` is always restored from the localstorage when you reload the site 
    @LocalStorage() public username:string = ''; 

    public password:string; 

    //here happens the magic. `rememberMe` is always restored from the localstorage when you reload the site 
    @LocalStorage() public rememberMe:boolean = false; 
} 

Voir

@Component({ 
    selector: 'admin-menu', 
    template: ` 
<div *ngFor="#menuItem of menuItems() | mapToIterable; #i = index"> 
    <h2 (click)="hiddenMenuItems[i] = !!!hiddenMenuItems[i]"> 
     {{i}}: {{category.label}} 
    </h2> 
    <div style="padding-left: 15px;" [hidden]="hiddenMenuItems[i]"> 
     <a href>Some sub menu item 1</a> 
     <a href>Some sub menu item 2</a> 
     <a href>Some sub menu item 3</a> 
    </div> 
</div> 
    ` 
}) 
class AdminMenuComponent { 
    public menuItems = [{title: 'Menu1'}, {title: 'Menu2'}, {title: 'Menu3'}]; 

    //here happens the magic. `hiddenMenuItems` is always restored from the localstorage when you reload the site 
    @LocalStorage() public hiddenMenuItems:Array<boolean> = []; 

    //here happens the magic. `profile` is always restored from the sessionStorage when you reload the site from the current tab/browser. This is perfect for more sensitive information that shouldn't stay once the user closes the browser. 
    @SessionStorage() public profile:any = {}; 
} 

Pour plus de précisions consultez ce lien link

Answer 4

Vous devez utiliser NgOnInit, est la meilleure approche pour votre problème que l'utilisation le constructeur puisque le constructeur est pour l'initialisation, l'injection de dépendance entre autres ... donc, ce qui pourrait arriver, c'est que les données ne sont pas encore disponibles au moment où vous le demandez. En plus de la page npmjs.com, ils ajoutent clairement un exemple en utilisant ngOnInit donc je suppose qu'ils ont vu ce problème venir.

Dans vos composants, ne import { .., OnInit, .. } from '@angular/core';

` de sorte que vous auriez quelque chose comme:

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

et dans votre classe d'exportation composant:

export class AppLoginComponent implements OnInit{ 

ngOnInit() { 
    //write your code here 
}