Angular 角度2如何在不同组件之间传递数据

Angular 角度2如何在不同组件之间传递数据,angular,Angular,我有两个不同的组件:一个是登录组件,另一个是用户组件 在登录组件中,我使用MakeLogin函数进行身份验证,然后从API获取用户详细信息并通过路由导航到主页(在主页中,用户组件被启动) 我从API获取的用户详细信息将保存到对象UserItem。这个对象需要在用户组件中处于活动状态,我无法做到这一点 我想知道让它工作的最好方法是什么 谢谢 登录组件: export class LoginComponent implements OnInit{ token : string; lo

我有两个不同的组件:一个是登录组件,另一个是用户组件

在登录组件中,我使用
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";
            }
        });
    }
}

Users
组件中,需要将属性定义为
@Input()user:UserItem
。另外,请确保从
@angular/core
导入
Input
。用于用户组件的HTML视图需要能够接受类型为
UserItem
的对象,才能在组件中显示它。例如:

user.component.ts

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]
部分对应于上面的
@Input()用户:UserItem属性定义。
currentUser
是您从API获得的内容,以及您希望在用户详细信息中显示的内容

更新
根据您的评论,实现您想要的最好方法是创建一个在两个组件之间共享的服务。由于服务被实例化为单例,您的值将在组件之间可用。

可能重复谢谢,但我知道此方法已存在登录和用户组件未连接它们有不同的路由器登录组件不是用户的父组件这似乎是什么问题?您的问题表明您无法在组件之间通信。