我有两个不同的组件:一个是登录组件,另一个是用户组件。
在登录组件中,我使用MakeLogin
功能进行身份验证,然后从API获取用户详细信息并按路由导航到主页(在主页中启动用户组件)
我从API获取的用户详细信息将保存到对象UserItem
。这个对象需要在用户组件中存活,我无法设法做到这一点
我想知道什么是让它发挥作用的最佳方法
谢谢!
登录组件:
export class LoginComponent implements OnInit{
token : string;
loginDetails : LoginItem;
LoginStatus : boolean;
error : string;
private loader = false;
currentUser : UserItem;
constructor(private LoginService : LoginService,private router : Router){}
ngOnInit(){
this.LoginStatus = this.LoginService.CheckLoginStatus();
if(this.LoginStatus === true){
this.router.navigate(['']);
}
}
MakeLogin(Email:string,Password:string) {
this.error = null;
this.loader = true;
this.loginDetails = new LoginItem(Email,Password);
this.LoginService.PostLogin(this.loginDetails).subscribe(data => {
if(data === true){
this.token = localStorage.getItem('id_token');
this.UsersService.GetUserDetailsFromDB(this.token).subscribe(data =>{
this.currentUser = new UserItem(data.firstName,data.lastName,data.email,data.id);
this.router.navigate([''])
});
}
}, error =>{
if(error === 401){
console.log(error);
this.loader = false;
this.error = "Username or Password incorrect";
}
});
}
}
答案 0 :(得分:1)
在@Input() user: UserItem
组件中,您需要将属性定义为Input
。另外,请确保从@angular/core
导入UserItem
。您用于用户组件的HTML视图需要能够接受import { Component, OnInit } from "@angular/core";
import { UserItem } from "../your/location/of/UserItem";
@Component({
selector: 'user-details',
templateUrl: 'location/to/your/client/views/user.component.html'
})
export class UserComponent {
@Input() user: UserItem;
}
类型的对象,以便能够在组件中显示它。例如:
<强> user.component.ts 强>
user-details
在您的登录组件中,根据您要托管的位置<user-details [user]="currentUser" />
,您需要指定以下内容:[user]
@Input() user: UserItem;
部分对应于上述currentUser
属性定义。 class MyController < ApplicationController
layout :resolve_layout
# ...
private
def resolve_layout
case action_name
when "new", "create"
"some_layout"
when "index"
"other_layout"
else
"application"
end
end
end
是您从API获得的内容以及您希望在用户详细信息中显示的内容。
根据您的评论,实现您想要的最佳方式是创建一个可在两个组件之间共享的服务。由于服务实例化为单例,因此组件之间可以使用您的值。