要在Angular中显示已登录用户的详细信息,您可以遵循以下步骤:
user.service.ts。import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class UserService {
private user: any; // 用户对象,包含详细信息
constructor() { }
setUser(user: any) {
this.user = user;
}
getUser() {
return this.user;
}
}
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-login',
template: `
`
})
export class LoginComponent {
username: string;
password: string;
constructor(private userService: UserService) { }
login() {
// 假设这里是一个登录方法,验证用户名和密码
// 登录成功后,获取用户详细信息,并保存在用户服务中
const user = {
username: this.username,
// 其他用户详细信息
};
this.userService.setUser(user);
}
}
import { Component } from '@angular/core';
import { UserService } from './user.service';
@Component({
selector: 'app-user',
template: `
{{ user.username }}
`
})
export class UserComponent {
user: any;
constructor(private userService: UserService) { }
ngOnInit() {
this.user = this.userService.getUser();
}
}
这样,当用户登录成功后,用户详细信息将在UserComponent中显示出来。
请注意,上述代码示例仅为了演示目的,并未完整实现实际的登录和用户详细信息逻辑。您需要根据您的实际需求进行适当的修改和调整。