angular2 - 在组件之间传递数据对象 [英] angular2 - passing data object between components

问题描述

如果可能，寻求帮助.

我有一个数据对象位于一个组件中，从 REST 调用接收.它包含我想跨组件共享的用户详细信息，但我遇到了问题.

I have a data object located in one component, received from a REST call. It contains user details that I would like to share across components, but I am having trouble.

将此对象传递给另一个组件以便我可以使用详细信息的最佳方法是什么?

What is the best way to pass this object over to another component, so I can use the details?

例如.数据对象名为 user，我想与单独的组件共享从数据库创建并从 REST 调用接收的 user._id.

Ex. The data object is named user, and I want to share the user._id created from the database and received from the REST call with a separate component.

感谢大家的帮助.

组件一(包含用户数据对象):

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, Router, Location} from 'angular2/router';
import {Control, FORM_DIRECTIVES, NgIf} from 'angular2/common';
import {UserLogin} from './navbar.login.service';
import {LoginService} from './navbar.login.service';
import {AccountDataService} from '../account/account.data.service';
import {User} from '../account/account.model';

@Component({
selector: 'navbar',
templateUrl: './app/navbar/navbar.component.html',
directives: [ROUTER_DIRECTIVES],
providers: [LoginService, AccountDataService]
})

export class NavbarComponent {

model: UserLogin;
user: User;
message: string;

constructor(private _service: LoginService, public _userService: AccountDataService,
    private router: Router, private location: Location) {
    this.model = this._service.modelInstance();
    this.user = this._userService.modelInstance();
}

onSubmit() {

    this._service.rawPost('?username=' + this.model.userName
        + '&password=' + this.model.password)
        .subscribe(res => {
            if (res.status === 200) {
                this.message = 'You have been logged in with: ' + this.model.userName;
                this.router.navigate(['Dashboard']);
                this._userService.read('/username/' + this.model.userName)
                    .subscribe(user => {
                        this.user = user; // <--- NEED THIS OBJECT PASSED AND SHARED!!
                })
                    });
            } else {
                this.message = 'Username or Password is not correct';
            }
        },
        error => {
            console.log("Response = %s", JSON.stringify(error));
            if (error.status == 401) {
                this.message = 'Username or Password is not correct';
            }
        });

}

toggleMenu() {
    this.menuActive = !this.menuActive;
}

logout() { //NOT SURE ABOUT THIS!!!
    // clears browser history so a user can't navigate with back button
    // this.location.replaceState('/');
    this.router.navigate(['Home']);
}

组件二需要调整.无法让上面的用户对象传入.现在甚至不确定从哪里开始.

import {Component, OnInit} from 'angular2/core';
import {UserCase} from './case/case.model';
import {User} from '../account/account.model';
import {ROUTER_DIRECTIVES} from 'angular2/router'; 
import {AccountDataService} from '../account/account.data.service';
import {NavbarComponent} from '../navbar/navbar.component';

@Component({
selector: 'dashboard',
templateUrl: './app/dashboard/dashboard.component.html',
directives: [NavbarComponent],
providers: [ROUTER_DIRECTIVES, AccountDataService],
})

export class DashboardComponent implements OnInit {

public user: User;
public userCase;
public userCases: UserCase[] = []

ngOnInit() {
    // Also trying to get each userCase object into the userCases array (not currently working)

    this._caseService.read('/user/' + this.user._id) //this.user not currently defined.
        .subscribe(userCase => {
            this.userCase = userCase;
        });

    this.userCases.push(this.userCase);
}

constructor(private _caseService: CaseDataService, private _userService: AccountDataService) {
    this.user = this._userService.modelInstance();
    this.userCase = this._caseService.modelInstance();
    this.userCases = [];
}

}

推荐答案

最好的方法是将数据作为组件二"的输入传递.

The best way is to just pass the data as an input for "Component Two".

因此，在组件一中，您应该:

<dashboard [user]="user"></dashboard>

在组件二中，您应该添加:

@Input() user;

您将无法在组件二的承包商内部访问此输入，只能在其ngOnInit"中访问.请参阅此以供参考

You will not be able to access this input inside Component Two's contractor, only inside its "ngOnInit". See this for reference

这篇关于angular2 - 在组件之间传递数据对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！