Question

我有两个不同的组件：一个是登录组件，另一个是用户组件。

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

在@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获得的内容以及您希望在用户详细信息中显示的内容。

更新

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

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

1 个答案:

更新