Navbar在用另一个帐户登录后不更新用户名

问题描述：

我正在创建登录页面，数据来自database.i已使用2登录帐户。我用一个用户名登录，然后在导航栏中显示用户名，当我登出并用另一个用户名登录时，显示的是以前的用户名。当我按F5然后它显示正确的用户名，请帮助我，我不想刷新页面。Navbar在用另一个帐户登录后不更新用户名

在导航栏组件

我在ngOnInit

ngOnInit() { 
     if(this.auth.loggedIn()){ 
      this.auth.getProfile().subscribe(profile=>{ 
       this.user=profile.user; 
      }, 
      err=>{ 
       console.log(err); 
       return false; 
      }); 
     } 
}

获取数据这里的模板

<li *ngIf="auth.loggedIn()"> 
      <a href="#>{{user?.name | uppercase}}</a> 
</li>

尝试禁用浏览器的缓存和你有任何启用服务器端缓存？ – Sriram

答

您可以直接使用的用户名从你的身份验证服务，如果您创建一个变量和事件保存在那里。例如，在您的验证服务

currentUser:any; 
    ... 
    // Your login implementation and save it to this.currentUser

以前

 <li *ngIf="auth.loggedIn()"> 
      <a href="#>{{user?.name | uppercase}}</a> 
    </li>

后

 <li *ngIf="auth.loggedIn()"> 
       <a href="#>{{auth.currentUser?.name | uppercase}}</a> 
     </li>

谢谢，它的工作.. :) –

@GauravUmrani很高兴它帮助你。将此标记为解决方案，以便其他人可以看到 – brijmcq

答

你面对错误

，因为当你的导航栏组件初始化，它会得到你的用户信息只有一次，所以当你用另一个账户登录时，“用户信息”不会改变。

您需要一些如何通知组件更改用户信息。

我建议创建“EventEmitter像”与子

import { Injectable } from '@angular/core'; 
import { Subject, BehaviorSubject } from "rxjs/Rx"; 

@Injectable() 
export class AuthService { 
    profile$: Subject<any> = new BehaviorSubject<any>({}); 
    constructor() { } 
    emit(value: any) { 
    this.profile$.next(value); 
    } 
    get profile(): BehaviorSubject<any> { 
    return this.profile$ as BehaviorSubject<any>; 
    } 

    login(credential) { 
    // after login successful, for example 
    this.emit({user: yourUserInfoObject}) 
    } 
}

在你的“导航栏组件”

ngOnInit() { 
    this.auth.profile.subscribe(profile=>{ 
     this.user = profile.user; 
    }, 
    err=>{ 
     console.log(err); 
    }); 
}

Navbar在用另一个帐户登录后不更新用户名

相关推荐