如何在使用 angular 开发的整个应用程序中访问用户名?

Question

我目前正在开发一个使用Angular，Express和MySQL的应用程序。我想从数据库中提取用户名并将其传递给前端，并在正确执行用户登录功能时在整个应用程序用户区域访问它。我有点意识到我可以使用 service.ts 文件来执行此操作，但我不知道具体怎么做。我可以得到一些帮助吗？

Answer 1

1. 按照你说的装箱一个AuthService.ts
2. 在服务中定义用户信息类型的可观察对象(可以是行为主体(
3. 在获取用户信息的 API 服务中，在定义的可观察量上注入 AuthService 使用下一个，以使用接收的数据更新所有订阅者(或服务中定义的方法调用(
在
4. 您需要的用户信息/配置文件的组件中注入服务
5. 在组件中订阅该可观察量

interface UserInfo {
email: string;
dob: string;
};
@Injectable({
providedIn: 'root'
})
export class AuthService {
UserInfo: BehaviorSubject<UserInfo> = new BehaviorSubject(null);
updateUserInfo(data: UserInfo) {
this.UserInfo.next(data);
}
}

在 api 服务中，您可以获取使用接收的数据调用updateInfo的用户信息(您必须将身份验证服务添加到带有访问修饰符私有、受保护、公共的 api 服务构造函数中，以便通过 angular 注入它(

在组件中：

export class HeaderComponent implements OnInit {
u: UserInfo;
constructor(private authService: AuthService) { }
ngOnInit() {
this.authService.UserInfo.subscribe(x=>this.u=x)
}
}

现在，您可以绑定到组件中的"u"字段。

使用可观察量将帮助您更新所有侦听器/订阅者(使用它的所有位置(。

Answer 2

服务的好处是伴随应用程序的生命周期。由于服务只是一个类，因此您可以拥有一个带有变量的服务，您可以在其中存储值

import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class DataService {
userName;
constructor(httpClient:HttpClient) { }
getUserName(user:string,password:String)
{
this.post('...your..api...',{user:user,password:password).pipe(tap(
res=>{
if (res==true)
this.userName=userName
}
))
}
}

我假设你有一个网址，它作为帖子接收{用户名：...，密码：...}，如果被记录，则返回true，如果没有，则返回false。

注入此服务的所有组件都可以使用和更改变量"用户名"。如果你想在.html中看到，在构造函数中将变量声明为公共

变量

constructor(public dataService:DataService){}
//and in the .html
{{dataService.userName}}