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

Question

我有两个不同的组件：一个是 login 组件，另一个是 users 组件。

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

Answer 1

在您的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-details 的位置，您需要指定如下内容：<user-details [user]="currentUser" />

[user] 部分对应于上面的@Input() user: UserItem; 属性定义。 currentUser 是您从 API 中获得的内容以及您希望在用户详细信息中显示的内容。

更新

根据您的评论，实现您想要的最佳方式是创建一个将在两个组件之间共享的服务。因为服务被实例化为单例，所以您的值将在组件之间可用。