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. 如何在登录页面单击登录按钮,并在下一页的导航栏组件上显示用户名?的主要内容,如果未能解决你的问题,请参考以下文章