时间戳

首页 > 解决方案 > Angular 8. 如何在登录页面点击登录按钮，并在下一页的导航栏组件上显示用户名？

html - Angular 8. 如何在登录页面点击登录按钮，并在下一页的导航栏组件上显示用户名？

问题描述

我的页面有 3 个组件，导航栏组件、菜单组件和登录组件。app.component.html 看起来像这样：

<app-navbar></app-navbar>

<router-outlet></router-outlet>

登录和菜单组件将在“router-outlet”中呈现，导航栏将在“app-navbar”中呈现。当我输入用户名和密码并单击提交按钮时，如果登录成功，我会将“路由器出口”从登录组件路由到菜单组件。我的愿望是当菜单组件出现时，我会在导航栏上看到用户的名字和姓氏，在新行中心的标题下。像这样的东西：

在此处输入图像描述

这是导航栏的 HTML：

<nav class="navbar rf-scanner-navbar">
  <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
    <h1>{{ title }}</h1>
  </div>
  <br>
  <div *ngIf="currentUserInfo" class="row">
    <p class="userInfo">{{currentUserInfo.firstname}} {{currentUserInfo.lastname}}</p>
  </div>
</nav>

问题是，我需要刷新整个页面以强制导航栏重新加载以显示名称。无论如何我可以使导航栏组件能够检测到更改的数据并显示它吗？

这是 Navebar 组件的 ts 代码，我注入了可注入的 authService 文件，该文件将调用 Api 来获取用户信息：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../_services/auth.service';
import { User } from '../_models/user';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  title = 'hello-world';
  currentUserInfo = this.authService.currentUserValue;

  constructor(
    private authService: AuthService,
  ) { }

  ngOnInit() {
  }

}

我在身份验证服务文件中也有这个公共方法：

  public get currentUserValue(): User {
    return this.currentUserSubject.value;
  }

还有一个问题，如何使名称 Div 在标题下的新行的中心（“hello-world”）？到目前为止，它们在同一行，
不起作用，我在上面的图片中拍照。

如果您需要有关此的更多信息，请告诉我。

标签： htmlcssangulartypescriptangular8

解决方案

您可以直接使用 authService 属性：

<div *ngIf="authService.currentUserValue" class="row">
    <p class="userInfo">{{authService.currentUserValue.firstname}} {{authService.currentUserValue.lastname}}</p>
  </div>

该值将随着服务值的更新而更新。

要将 div 置于新行的中心，请尝试将其移至 h1 标签下方：

<nav class="navbar rf-scanner-navbar">
  <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
    <h1>{{ title }}</h1>
    <div *ngIf="currentUserInfo" class="row">
      <p class="userInfo">{{currentUserInfo.firstname}} 
        {{currentUserInfo.lastname}}
      </p>
    </div>
  </div>
</nav>

将“文本对齐：中心”放在类/样式上。

推荐阅读