Question

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

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

Authguard.ts

copytree

用户-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();
  }
}

Login.ts

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

Answer 1

成功登录后，您需要将登录用户存储在某些服务中。最优选的是AuthService或UserService。然后将该服务注入导航栏组件并使用插值显示该用户的用户名。

我会做这样的事情：

<强> user.service.ts

private _loggedInUser?: User;

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

我建议您使用localStorage或sessionStorage，而不是将loggedInUser存储在内存中。

<强> login.component.ts

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

<强> navbar.component.ts

constructor(public user: UserService) { }

<强> navbar.component.html

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

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

1 个答案: