Angular2 Comment afficher localStorage valeur à l'intérieur de HTML5 modèle?

- Je stocker 2 clés dans le localStorage et j'aimerais afficher l'un d'eux dans mon template. Je ne peux pas accéder à ces valeurs. J'ai même créé une interface pour stocker la valeur de la currentUser clé de localStorage. Comment faut-il mettre en œuvre?

Voici le code actuel:

Service

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Md5 } from 'ts-md5/dist/md5';

import { User } from './user';
import 'rxjs/add/operator/map';

@Injectable()
export class VehicleService {
    private defUrl = 'dummy-url.com';

    constructor(private http: Http) { }
    getVehicle(username?: string, password?: string) {
        const url = (!username || !password) ? this.defUrl : 'dummy-url.com' + username + '/' + Md5.hashStr(password);
        return this.http.get(url)
            .map(res => res.json());
    }

    parseUser(): any {
        return JSON.parse(localStorage.getItem('parseUser'));
    }

    getUser(): any {
        return localStorage.getItem('currentUser');
    }
}

Composant Login

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Location } from '@angular/common';
import { Router } from "@angular/router"
import { VehicleService } from './vehicle.service';
import { User } from './user';
@Component({
selector: 'login',
templateUrl: './login.html',
providers: [VehicleService]
})
export class LoginComponent implements OnInit {
public user: FormGroup;
ngOnInit() {
this.user = new FormGroup({
username: new FormControl('', Validators.required),
password: new FormControl('', Validators.required)
});
}
constructor(public vehicleService: VehicleService, private location: Location, private router: Router) {
}
onSubmit(user) {
this.vehicleService
.getVehicle(user.value.username, user.value.password)
.subscribe(user => {
this.user = user;
localStorage.setItem('parseUser', JSON.stringify(this.user));
this.router.navigate(['/vehicle']);
console.log('submit');
});
localStorage.setItem('currentUser', user.value.username);
}
goBack(): void {
console.log("Back button");
this.location.back();
}
}

Composant Du Véhicule

import { Component, enableProdMode, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup } from '@angular/forms';
import { VehicleService } from './vehicle.service';
import { User } from './user';
import { LoginComponent } from './login.component';
enableProdMode();
@Component({
selector: 'vehicle-json',
templateUrl: './vehicle.html',
providers: [VehicleService]
})
export class VehicleComponent implements OnDestroy {
public vehicles: GeneralVehicle[];
public currUser: CurrentUser;
ngOnDestroy() {
localStorage.removeItem('currentUser');
}
constructor(private vehicleService: VehicleService, private router: Router) {
this.vehicleService.getVehicle().subscribe(vehicle => {
this.vehicles = vehicle;
this.vehicles = this.vehicleService.parseUser();
//this.vehicles = this.vehicleService.parseUser();
});
let currUser = this.vehicleService.getUser();
}
toLogin(): void {
console.log("toLogin button");
this.router.navigate(['/login']);
localStorage.removeItem('parseUser');
localStorage.removeItem('currentUser');
}
}
interface GeneralVehicle {
status: number;
dallases: Vehicle[];
}
interface Vehicle {
vehicle_id: number;
dallassettings: string;
dallasupdated: string;
dallas_list: DallasList[];
}
interface DallasList {
number: number;
auth: number;
}
interface CurrentUser {
usr: string;
}

Modèle: vehicle.html

<button class="btn btn-default" type="button" (click)="toLogin()">Login</button>
<div *ngIf="vehicles">
<b>Status: {{vehicles?.status}} for user: DISPLAY-USER-HERE</b>
<div class="list-group" *ngFor="let vehicle of vehicles.dallases" id="d1">
<a class="list-group-item">
<h4 class="list-group-item-heading" id="l1">Vehicle ID: {{vehicle.vehicle_id}}</h4>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">Dallas settings: {{vehicle.dallassettings}}</h4>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">Dallas updated: {{vehicle.dallasupdated}}</h4>
</a>
<a class="list-group-item">
<h4 class="list-group-item-heading">Dallas list:</h4>
<p class="list-group-item-text" *ngFor="let d of vehicle.dallas_list">
<b>Number:</b> {{d.number}}<br>
<b>Auth:</b> {{d.auth}}</p>
</a>
</div>
</div>

OriginalL'auteur Haseoh | 2017-02-07