Angular 5-将登录的用户名添加到导航栏

我试图在他登录后从登录视图/组件中获取用户名，并将其添加到导航栏（除非他注销，否则保留该用户名）。
我想我需要使用服务/观测，但我对角度测量是新手，我不知道从哪里/如何开始。
任何帮助都将感激不尽。
谢谢

现在我正在使用Authguard和用户服务。
这是我的代码：

Authguard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import {UserService} from './user.service';

@Injectable()
export class AuthguardGuard implements CanActivate {
  constructor(private user: UserService) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.user.getUserLoggedIn();
  }
}

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

  public isUserLoggedIn;
  public matricula;
  constructor() {
    this.isUserLoggedIn = false;
  }

  setUserLoggedIn() {
    this.isUserLoggedIn = true;
  }
  getUserLoggedIn() {
    return this.isUserLoggedIn;
  }
  setUserLoggedOut() {
    this.isUserLoggedIn = false;
  }
}

private _loggedInUser?: User;

get loggedInUser(): User {
    return this._loggedInUser;
}
set loggedInUser(user: User) {
    this._loggedInUser = user;
}

login() {
    // ... validate
    if (valid) {
        this.user.loggedInUser = user;
        this.router.navigate(/* your path here */);
    }
}

constructor(public user: UserService) { }

Login.ts

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Router} from '@angular/router';
import swal from 'sweetalert2';
import {UserService} from '../user.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 datos: any;
 matricula: any;
 contrasena: any;

  constructor(private http: HttpClient, private router: Router, private user: UserService) {
  }

  ngOnInit() {
    if (this.user.getUserLoggedIn() === true) {
      this.router.navigate(['/productos']);
    } else {
    }
  }

  getCredentials() {
    this.http.get('http://localhost/cafeteria/login/validar.php').subscribe((data: any) => {
      this.datos = data;
      this.validar();
    });
  }
  validar() {
    if (this.datos[0].matricula === this.matricula) {
      if (this.datos[0].contrasena === this.contrasena) {
         this.user.setUserLoggedIn();
         this.router.navigate(['/productos']);
     switch (this.datos[0].idrol) {
       case '1':
         this.router.navigate(['/productos']);
         break;
       case '2':
         this.router.navigate(['/cPanel']);
         break;
       case '3':
         this.router.navigate(['/cPanel']);
         break;
     }
      }
    } else {
      swal('Datos Incorrectos');
    }
  }
}

---

成功登录后，您需要将登录的用户存储在某些服务中。最好是您的

AuthService

，或

UserService

。然后将该服务注入到navbar组件中，并使用插值显示该用户的用户名

我会这样做：

user.service.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import {UserService} from './user.service';

@Injectable()
export class AuthguardGuard implements CanActivate {
  constructor(private user: UserService) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.user.getUserLoggedIn();
  }
}

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

  public isUserLoggedIn;
  public matricula;
  constructor() {
    this.isUserLoggedIn = false;
  }

  setUserLoggedIn() {
    this.isUserLoggedIn = true;
  }
  getUserLoggedIn() {
    return this.isUserLoggedIn;
  }
  setUserLoggedOut() {
    this.isUserLoggedIn = false;
  }
}

private _loggedInUser?: User;

get loggedInUser(): User {
    return this._loggedInUser;
}
set loggedInUser(user: User) {
    this._loggedInUser = user;
}

login() {
    // ... validate
    if (valid) {
        this.user.loggedInUser = user;
        this.router.navigate(/* your path here */);
    }
}

constructor(public user: UserService) { }

我建议使用

localStorage

或

sessionStorage

而不是将

loggedInUser

存储在内存中

login.component.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import {UserService} from './user.service';

@Injectable()
export class AuthguardGuard implements CanActivate {
  constructor(private user: UserService) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.user.getUserLoggedIn();
  }
}

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

  public isUserLoggedIn;
  public matricula;
  constructor() {
    this.isUserLoggedIn = false;
  }

  setUserLoggedIn() {
    this.isUserLoggedIn = true;
  }
  getUserLoggedIn() {
    return this.isUserLoggedIn;
  }
  setUserLoggedOut() {
    this.isUserLoggedIn = false;
  }
}

private _loggedInUser?: User;

get loggedInUser(): User {
    return this._loggedInUser;
}
set loggedInUser(user: User) {
    this._loggedInUser = user;
}

login() {
    // ... validate
    if (valid) {
        this.user.loggedInUser = user;
        this.router.navigate(/* your path here */);
    }
}

constructor(public user: UserService) { }

navbar.component.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import {UserService} from './user.service';

@Injectable()
export class AuthguardGuard implements CanActivate {
  constructor(private user: UserService) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.user.getUserLoggedIn();
  }
}

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

  public isUserLoggedIn;
  public matricula;
  constructor() {
    this.isUserLoggedIn = false;
  }

  setUserLoggedIn() {
    this.isUserLoggedIn = true;
  }
  getUserLoggedIn() {
    return this.isUserLoggedIn;
  }
  setUserLoggedOut() {
    this.isUserLoggedIn = false;
  }
}

private _loggedInUser?: User;

get loggedInUser(): User {
    return this._loggedInUser;
}
set loggedInUser(user: User) {
    this._loggedInUser = user;
}

login() {
    // ... validate
    if (valid) {
        this.user.loggedInUser = user;
        this.router.navigate(/* your path here */);
    }
}

constructor(public user: UserService) { }

navbar.component.html

<h1>Hello, {{user.loggedInUser}}</h1>

Hello，{{user.loggedInUser}

你能发布关于你的项目是如何组织的，以及你是如何让用户登录/跟踪这个登录用户的信息吗？@DanielWStrimpel当然，我修改了我的帖子。