Angular 8. 如何在登录页面单击登录按钮,并在下一页的导航栏组件上显示用户名?

Posted

技术标签:

【中文标题】Angular 8. 如何在登录页面单击登录按钮,并在下一页的导航栏组件上显示用户名?【英文标题】:Angular 8. How can I Click Login button on login page, and display the user name on Navbar component in next page? 【发布时间】:2020-05-19 13:32:07 【问题描述】:

我的页面有 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”)?到目前为止它们在同一行, 不起作用,我照片购买了上面的图片。

如果您需要更多相关信息,请告诉我。

【问题讨论】:

你应该把currentUserInfo = this.authService.currentUserValue; 放在ngOnInit 中。原则上,您应该将所有使用某些注入服务的初始化放入ngOnInit this.currentUserSubject的类型是什么? BehaviorSubject,我试过oninit的方式,不行,还是需要刷新才能显示 是的,我没想到它会解决这个问题,但它是未来使用的好习惯。否则你可能会遇到非常奇怪的错误。 【参考方案1】:

您可以直接使用 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>

将 'text-align: center' 放在类/样式上。

【讨论】:

我确实有注射服务,请参阅上面的编辑问题。谢谢你的回答。 因此您可以在 html 中使用 authService.currentUserValue.firstName ,即直接使用您的 authService 属性,而不是将其分配给 currentUserInfo 属性。修改后的答案。 它工作:)。我爱你,兄弟。我是前端开发的新手,你不知道你帮了我多少...顺便说一句,名称仍然显示在标题旁边而不是下一个新行...知道吗? :) 注入服务是 Angular 的一大优点,请在 Angular 网站上阅读它。取决于其他样式及其效果。尝试暂时删除“行”类,看看是否有帮助。或者在 div 上设置“clear:both”。如果没有看到所有的 CSS,对我来说很难说。 我认为这不是很好的做法,因为 Angular 更改检测会多次调​​用 currentUserValue。更好的解决方案是公开 BehaviorSubject 并在 ngOnInit 订阅它

以上是关于Angular 8. 如何在登录页面单击登录按钮,并在下一页的导航栏组件上显示用户名?的主要内容,如果未能解决你的问题,请参考以下文章

登录和注册在 Angular 8 中不起作用

单击登录按钮后,Android登录页面崩溃

Spring Boot 安全性:在 Angular 8 中显示登录页面时出现问题

如何在提交按钮表单中使用路由 - Angular2

在 Angular 中承诺 3 秒后重新加载页面

单击注销按钮终止会话并重定向到登录页面