如何将json对象的一个​​组件传递给另一个组件？

Question

如何将JSON个对象组件传递给另一个组件。我有两个组件LoginView和ProfileView。我在LoginView组件中获得了特定的用户详细信息。我想将this.result和this.studentresult传递给ProfileView组件，基本上在登录后我试图将用户详细信息传递给用户个人资料页面。我怎么能这样做，帮助我，我是棱角分明的新人。

我经历了How to send a value from one component to another?

但在我的情况下，我想在LoginView组件中调用3个api，我需要将所有这些api结果传递给ProfileView组件

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;
            }    
        }

}

ProfileView组件

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

Answer 1

您可以创建共享服务，在LoginView上设置变量并在ProfileView上读取它。

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

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

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

ProfileView组件

export class ProfileView {

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

}

Answer 2

对您的请求使用Observable.forkJoin，然后使用共享服务在组件之间传递数据。我喜欢使用BehaviorSubjects在任何方式无关的组件之间共享数据....

服务：

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

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

在模块级别提供此服务，而不是组件。

然后如上所述，使用Observable forkjoin并行执行请求。这会根据您提供的顺序生成一系列结果，并通过您的服务传递给您的其他组件：

（案例：不使用可管理的运算符）：

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

然后在您的其他组件中，您订阅了observable：

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