Question

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

导航栏组件中的

我在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>

Answer 1

如果您创建变量并将其保存在那里，则可以直接使用身份验证服务中的用户名。例如，在您的Auth服务中

   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>

Answer 2

您遇到错误，因为，当您的Navbar组件初始化时，它只会获取您的用户信息一次，因此当您使用其他帐户登录时，＆＃34;用户信息＆＃34;不会改变。

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

我建议创建＆＃34; EventEmitter喜欢＆＃34; Sub的事件

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})
  }
}

在导航栏组件＆＃34;

中

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

使用其他帐户登录后，导航栏不会更新用户名

2 个答案: