Angular2 如何在 HTML5 模板中显示 localStorage 值? [英] Angular2 How to display localStorage value inside HTML5 template?
问题描述
我在 localStorage 中存储了 2 个键,我想在我的模板中显示其中一个.我无法访问这些值.我什至创建了一个接口来存储 localStorage 中 currentUser 键的值.应该如何实施?
这是当前代码:
服务
import { Injectable } from '@angular/core';从 '@angular/http' 导入 { Http };从 'ts-md5/dist/md5' 导入 { Md5 };从'./user'导入{用户};导入 'rxjs/add/operator/map';@Injectable()出口类 VehicleService {private defUrl = 'dummy-url.com';构造函数(私有http:Http){}getVehicle(用户名?:字符串,密码?:字符串){const url = (!username || !password) ?this.defUrl : 'dummy-url.com' + 用户名 + '/' + Md5.hashStr(密码);返回 this.http.get(url).map(res => res.json());}parseUser(): 任何 {返回 JSON.parse(localStorage.getItem('parseUser'));}getUser(): 任何 {返回 localStorage.getItem('currentUser');}}
登录组件
import { Component, OnInit } from '@angular/core';从@angular/forms"导入 { FormGroup, FormControl, Validators };从@angular/common"导入{位置};从@angular/router"导入{路由器}从 './vehicle.service' 导入 { VehicleService };从'./user'导入{用户};@成分({选择器:'登录',templateUrl: './login.html',提供者:[车辆服务]})导出类 LoginComponent 实现 OnInit {公共用户:FormGroup;ngOnInit() {this.user = new FormGroup({用户名:new FormControl('', Validators.required),密码:new FormControl('', Validators.required)});}构造函数(公共车辆服务:车辆服务,私有位置:位置,私有路由器:路由器){}提交(用户){this.vehicleService.getVehicle(user.value.username, user.value.password).订阅(用户 => {this.user = 用户;localStorage.setItem('parseUser', JSON.stringify(this.user));this.router.navigate(['/车辆']);console.log('提交');});localStorage.setItem('currentUser', user.value.username);}返回():无效{console.log("返回按钮");this.location.back();}}
车辆组件
import { Component, enableProdMode, OnDestroy } from '@angular/core';从@angular/router"导入{路由器};从@angular/forms"导入{FormGroup};从 './vehicle.service' 导入 { VehicleService };从'./user'导入{用户};import { LoginComponent } from './login.component';enableProdMode();@成分({选择器:'车辆-json',templateUrl: './vehicle.html',提供者:[车辆服务]})导出类 VehicleComponent 实现 OnDestroy {公共车辆:GeneralVehicle[];公共当前用户:当前用户;ngOnDestroy() {localStorage.removeItem('currentUser');}构造函数(私人车辆服务:车辆服务,私人路由器:路由器){this.vehicleService.getVehicle().subscribe(vehicle => {this.vehicles = 车辆;this.vehicles = this.vehicleService.parseUser();//this.vehicles = this.vehicleService.parseUser();});让 currUser = this.vehicleService.getUser();}toLogin(): void {console.log("登录按钮");this.router.navigate(['/login']);localStorage.removeItem('parseUser');localStorage.removeItem('currentUser');}}接口 GeneralVehicle {状态:编号;达拉斯:车辆[];}接口车辆{Vehicle_id:编号;达拉斯设置:字符串;达拉斯更新:字符串;dallas_list: 达拉斯列表[];}接口达拉斯列表{数量:数量;认证:号码;}接口当前用户{usr:字符串;}
模板:vehicle.html
<button class="btn btn-default" type="button" (click)="toLogin()">登录</button><div *ngIf="车辆"><b>状态:{{vehicles?.status}} 用户:DISPLAY-USER-HERE</b><div class="list-group" *ngFor="让车辆的车辆.dallases" id="d1"><a class="list-group-item"><h4 class="list-group-item-heading" id="l1">车辆 ID:{{vehicle.vehicle_id}}</h4></a><a class="list-group-item"><h4 class="list-group-item-heading">达拉斯设置:{{vehicle.dallassettings}}</h4></a><a class="list-group-item"><h4 class="list-group-item-heading">达拉斯更新:{{vehicle.dallasupdated}}</h4></a><a class="list-group-item"><h4 class="list-group-item-heading">达拉斯列表:</h4><p class="list-group-item-text" *ngFor="let d of vehicle.dallas_list"><b>编号:</b>{{d.number}}
<b>身份验证:</b>{{d.auth}}</p></a>
您可以使用 getter 从 localStorage 获取值并将其显示在您的模板中.在模板的组件类中像下面那样定义它.
get user(): any {返回 localStorage.getItem('currentUser');}
在你的模板中:
<b>状态:{{vehicles?.status}} 用户:{{user}}</b>
I store 2 keys in localStorage and I'd like to display one of them in my template. I can't access these values. I even created an interface just to store the value of the currentUser key from localStorage. How should implement it?
Here's the current code:
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');
}
}
Login Component
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();
}
}
Vehicle Component
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;
}
Template: 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>
You can use a getter to get the value from localStorage and show it in your template. Define it like bellow in the component class of your template.
get user(): any {
return localStorage.getItem('currentUser');
}
In you template:
<b>Status: {{vehicles?.status}} for user: {{user}}</b>
这篇关于Angular2 如何在 HTML5 模板中显示 localStorage 值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!