angular2 - Transmettre l'objet de données entre les composants

Question

Vous cherchez de l'aide, si possible.

J'ai un objet de données situé dans un composant, reçu à partir d'un appel REST. Il contient les détails de l'utilisateur que je voudrais partager entre les composants, mais j'ai des problèmes.

Quelle est la meilleure façon de passer cet objet à un autre composant, afin que je puisse utiliser les détails?

Ex. L'objet de données s'appelle user, et je souhaite partager l'user._id créé à partir de la base de données et reçu de l'appel REST avec un composant séparé.

Merci à tous pour votre aide.

COMPOSANT UN (contient l'objet de données d'utilisateur):

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']); 
} 

deux composants doit être ajusté. Impossible de faire passer l'objet utilisateur ci-dessus. Vous ne savez même pas par où commencer à ce stade.

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 = []; 
} 

} 

Answer 1

La meilleure façon est de passer uniquement les données en entrée pour « Component Two ».

Ainsi, à l'intérieur composant un, vous devez faire:

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

et à l'intérieur Component Deux vous devez ajouter:

@Input() user; 

Vous ne serez pas en mesure d'accéder à cette entrée à l'intérieur L'entrepreneur de Component Two, seulement à l'intérieur de son «ngOnInit». Voir this pour la référence