Comment passer un objet json d'un composant à un autre composant en angular ?

Question

Comment passer JSON d'objecter un composant à un autre composant. J'ai deux composants LoginView et ProfileView. J'ai obtenu des détails particuliers sur l'utilisateur dans le composant LoginView. Je veux passer this.result y this.studentresult au composant ProfileView. En fait, après la connexion, j'essaie de transmettre les détails de l'utilisateur à la page de son profil. Comment puis-je faire cela, aidez-moi, je suis nouveau dans Angular.

je suis passé par Comment envoyer une valeur d'un composant à un autre ?

mais dans mon cas, je veux appeler 3 api dans le composant LoginView et je dois passer tous les résultats de ces api au composant ProfileView.

Composant LoginView

export class LoginView {      
    constructor(private http: HttpClient, private router: Router) {}      
    ngOnInit() {}      
    this.http.get('http://localhost:8080/user/1')
        .subscribe((response: any) => {
                this.result = response;
            }    
        }
     this.http.get('http://localhost:8080/student/1')
        .subscribe((response: any) => {
                this.studentresult = response;
            }    
        }

}

Composant ProfileView

export class ProfileView {    
  constructor() { }
  ngOnInit() {}    
}

Answer 1

Vous pouvez créer un service partagé, définir une variable sur LoginView et la lire sur ProfileView.

import { Injectable } from '@angular/core';

@Injectable()
export class SharedService{
    userData;
    constructor(){
      this.userData= {};
    }
    setUserData(val: object){
      this.userData= val;
    }
    getUserData(){
      return this.userData;
    }
}

Composant LoginView

export class LoginView {

  constructor(private http: HttpClient, private router: Router, private sharedService: SharedService) { }

  ngOnInit() {
  }
  this.http.get('http://localhost:8080/user/1')
      .subscribe((response:any) => {
        this.result = response;
        this.sharedService.setUserData(response);
       }
}

Composant ProfileView

export class ProfileView {

  constructor(sharedService: SharedService) {
  console.log(sharedService.getUserData());
  }
  ngOnInit() {}

}

Answer 2

Utilice Observable.forkJoin pour vos demandes, puis utilisez un service partagé pour transmettre les données entre les composants. J'aime utiliser BehaviorSubjects pour partager des données entre des composants qui ne sont liés d'aucune façon....

Service :

// behaviorsubject wants an inital value
private mySubject = new BehaviorSubject([]);
public mySubject$ = this.mySubject.asObservable();

setValue(value) {
  this.mySubject.next(value);
}

Fournir ce service au niveau du module, et non du composant.

Puis, comme indiqué, utilisez l'Observable forkjoin pour exécuter les demandes en parallèle. Cela produit un tableau de votre résultat avec le contenu dans l'ordre que vous avez fourni, que vous pouvez passer à votre autre composant via votre service :

(cas : pas d'utilisation d'opérateurs pipeables) :

let user = this.http.get('http://localhost:8080/user/1');
let student = this.http.get('http://localhost:8080/student/1');

Observable.forkJoin([user, student]).subscribe(data => {
   this.myService.setValue(data);
});

Ensuite, dans votre autre composant, vous vous abonnez à l'observable :

this.myService.mySubject$.subscribe(data => {
  this.user = data[0];
  this.student = data[1];
});