您好我需要在用户登录后更新标题中的登录名。 这是我的代码：
app.componet.html
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
app.component.ts
import { Component,OnDestroy } from '@angular/core';
import { MyservicesService } from './myservices.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private myservices: MyservicesService) {
}
}
Header.component.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img class="img-responsive" src="assets/images/logo.png" alt="logo">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a routerLink="home" routerLinkActive="active">Home</a></li>
<li><a routerLink="shop">Shop</a></li>
<li><a href="#aboutus">About us</a></li>
<li><a href="#contactus">Contact</a></li>
<li *ngIf="displayuser" class="dropdown">
<a class="dropdown-toggle displaycurrentuser" data-toggle="dropdown" href="#">{{currentusername}}
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a (click)="logOut()">Log out</a></li>
</ul>
</li>
<li *ngIf="!displayuser"><a href="#" routerLink="loginorregister"><button style="margin-top: -10px;" class="btn btn-primary"> Login / Register</button></a></li>
<li><a routerLink="cartlist"><span><i class="fa fa-shopping-cart" aria-hidden="true"></i> {{noofitemsincart}} </span></a></li>
</ul>
</div>
</div>
</nav>
Header.component.ts
import { Component, OnInit,Input } from '@angular/core';
import { AuthenticationService } from '../authentication.service';
import { MyservicesService } from '../myservices.service';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
displayuser:boolean = false;
currentusername;
noofitemsincart;
user:any;
constructor(private authenticationService: AuthenticationService,private myservices: MyservicesService) {
}
ngOnInit() {
this.user = this.authenticationService.getCurrentUserData();
if(this.user!=null){
//this.user=JSON.parse(this.user);
if(this.user.UserNameorEmail!=null){
this.displayuser=true;
console.log("displayuser "+this.displayuser);
this.currentusername=this.user.UserNameorEmail;
}
}
}
logOut() {
this.user= this.authenticationService.logout();
this.displayuser=false;
}
}
Loginorregistercomponent.html
<section class="news_area newsblock">
<div class="container">
<div class="row">
<div class="section-title">
<h2>my <span>account</span></h2>
</div>
</div>
<!--endrow-->
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 spaceblock">
<div class="login">
<h3 class="titlel">Login</h3>
</div>
<form name="form" (ngSubmit)="loginform.form.valid && login()" #loginform="ngForm" novalidate>
<div class="loginpart">
<div class="form-group froma" [ngClass]="{'has-error': loginform.submitted && !username.valid}">
<label for="email">Username or email address <span class="required"> *</span></label>
<input type="email" class="form-control" id="email" placeholder="" name="username" name="username" [(ngModel)]="model.username"
#username="ngModel" required>
<div *ngIf="loginform.submitted && !username.valid" class="help-block">Username is required</div>
</div>
<div class="form-group" [ngClass]="{ 'has-error': loginform.submitted && !password.valid }">
<label for="pwd">Password<span class="required"> *</span></label>
<input type="password" class="form-control" id="pwd" placeholder="" name="password" [(ngModel)]="model.password" #password="ngModel"
required>
<div *ngIf="loginform.submitted && !password.valid" class="help-block">Password is required</div>
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<button [disabled]="lloading" type="submit" class="btn btn-primary">Login</button>
<img *ngIf="lloading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
/>
<div class="lostpass"><a href="#">Lost your password?</a></div>
<div *ngIf="lerror" class="danger">{{lerror}}</div>
</div>
</form>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 spaceblock">
<div class="login">
<h3 class="titlel">Register</h3>
</div>
<form name="form" (ngSubmit)="registerform.form.valid && register()" #registerform="ngForm" novalidate>
<div class="loginpart">
<div class="form-group froma" [ngClass]="{ 'has-error': registerform.submitted && !newusername.valid }">
<label for="email">Email address <span class="required"> *</span></label>
<input type="email" class="form-control" id="email" placeholder="" name="newusername" [(ngModel)]="registermodel.newusername"
#newusername="ngModel" required>
<div *ngIf="registerform.submitted && !newusername.valid" class="help-block">Username is required</div>
</div>
<div class="form-group" [ngClass]="{ 'has-error': registerform.submitted && !newpassword.valid }">
<label for="pwd">Password<span class="required"> *</span></label>
<input type="password" class="form-control" id="pwd" placeholder="" name="newpassword" [(ngModel)]="registermodel.newpassword"
#newpassword="ngModel" required>
<div *ngIf="registerform.submitted && !newpassword.valid" class="help-block">Password is required</div>
</div>
<button type="submit" [disabled]="rloading" class="btn btn-primary">Register</button>
<img *ngIf="rloading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
/>
<div *ngIf="rerror" class="danger">{{rerror}}</div>
</div>
</form>
</div>
</div>
<!--endimgSection-->
</div>
</section>
Loginorregistercomponent.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AuthenticationService } from '../authentication.service';
@Component({
selector: 'app-loginorregister',
templateUrl: './loginorregister.component.html',
styleUrls: ['./loginorregister.component.css']
})
export class LoginorregisterComponent implements OnInit {
model: any = {};
registermodel: any = {};
lloading = false;
rloading = false;
returnUrl: string;
lerror;
rerror;
constructor( private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService) { }
ngOnInit() {
this.authenticationService.logout();
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
login() {
this.lloading = true;
this.authenticationService.login(this.model.username, this.model.password)
.subscribe(
data => {
console.log(data);
if(!data.hasOwnProperty('Code')){
this.router.navigate([this.returnUrl]);
}else{
this.lerror=data.Message;
console.log(this.lerror);
this.lloading = false;
}
},
error => {
//this.alertService.error(error);
this.lerror=error;
console.log(error);
this.lloading = false;
});
}
register() {
this.rloading = true;
this.authenticationService.create(this.registermodel.newusername, this.registermodel.newpassword)
.subscribe(
data => {
data=JSON.parse(data);
if(!data.hasOwnProperty("Code")){
this.router.navigate([this.returnUrl]);
console.log("in data "+data);
}
else{
console.log("out data "+data.Message);
this.rerror=data.Message;
this.rloading = false;
}
},
error => {
// this.alertService.error(error);
this.rerror=error;
this.rloading = false;
});
}
}
authenticationService.ts
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'
@Injectable()
export class AuthenticationService {
user:any;
headers = new Headers({ 'Content-Type': 'application/json' });
options = new RequestOptions({ headers: this.headers });
constructor(private http: Http) { }
login(username: string, password: string) {
return this.http.post('http://www.myweb.com/User/Login', JSON.stringify({UserNameorEmail: username,Password: password}),this.options)
.map((response: Response) => {
let user = response.json();
console.log("in service "+user);
if (user) {
localStorage.setItem('currentUser', JSON.stringify(user));
console.log("user.token "+user);
}
return user;
});
}
logout() {
// remove user from local storage to log user out
localStorage.removeItem('currentUser');
}
create(username: string, password: string) {
return this.http.post('http://www.myweb.com/User/Add', JSON.stringify({UserNameorEmail: username, Password: password }),this.options)
.map((response: Response) => {
let user = response.json();
if (user) {
localStorage.setItem('currentUser', JSON.stringify(user));
}
return user;
});
}
getCurrentUserData(){
this.user= localStorage.getItem("currentUser");
this.user=JSON.parse(this.user);
if(this.user!=null){
if(this.user.UserNameorEmail!=null){
return this.user;
}else{
return this.user=null;
}
}else{
return this.user=null;
}
}
}
答案 0 :(得分：1)
我的项目中通常有一个state.service.ts，用于存储应用程序状态（当前用户等）。
在此，我创建了以下内容：
// BehaviorSubject to store UserName
private currentUserNameStore = new BehaviorSubject<string>("");
// Make UserName store Observable
public currentUserName$ = this.currentUserNameStore.asObservable();
// Setter to update UserName
setCurrentUserName(userName: string) {
this.currentUserNameStore.next(userName);
}
然后在您需要显示当前用户的标题组件中，您从州服务订阅Observable：
stateSvc.currentUserName$
.subscribe(
userName => {
userName = userName;
});
你可以像这样在标题中显示：
{{userName}}
然后在您的登录组件中，一旦您有登录用户，您可以使用服务中的Setter设置值：
this.stateSvc.setCurrentUserName(this.userName);
由于订阅了标题组件上的标题，它将拾取更改并更新组件上的显示。
答案 1 :(得分：0)
在加载<app-header> </app-header>
即。
<div *ngIf="authorised">
<app-header></app-header>
</div>
授权的是app.component.ts的成员。
即，在呈现<app-header></app-header>之前，您必须确保displayuser或currentusername是否可用。
如果您觉得有帮助，请标记。