Angular 如何将json对象从一个组件传递到另一个组件？

如何将

JSON

对象从一个组件传递到另一个组件。我有两个组件LoginView和ProfileView。我在LoginView组件中获得了特定的用户详细信息。我想将

this.result

和

this.studentresult

传递到ProfileView组件，基本上在登录后，我正在尝试将用户详细信息传递到用户配置文件页面。我该怎么做，帮帮我，我是新手

我经历了

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

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

export class ProfileView {

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

}

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

}

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

ProfileView组件

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

}

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

---

您可以创建共享服务，在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);
       }
}

export class ProfileView {

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

}

ProfileView组件

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

export class ProfileView {

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

}

---

对您的请求使用

Observable.forkJoin

，然后使用共享服务在组件之间传递数据。我喜欢使用

BehaviorSubjects

在没有任何关联的组件之间共享数据

服务：

//behaviorsubject需要初始值
private mySubject=new BehaviorSubject（[]）；
public mySubject$=this.mySubject.asObservable（）；
设置值（值）{
this.mySubject.next（值）；
}

在模块级而非组件级提供此服务

然后，如前所述，使用Observable forkjoin并行执行请求。这将按照您提供的顺序生成一个包含内容的结果数组，您可以通过服务将其传递给其他组件：

（情况：不使用管道操作器）：

let user=this.http.get（'http://localhost:8080/user/1');
让student=this.http.get（'http://localhost:8080/student/1');
可观察。forkJoin（[用户，学生]）。订阅（数据=>{
this.myService.setValue（数据）；
});

然后在您的其他组件中，您订阅了可观察的：

this.myService.mySubject$.subject$.subscribe（数据=>{
this.user=数据[0]；
this.student=数据[1]；
});

视图之间的关系是什么？它们只是不同的页面吗？你可以使用一个保存数据的服务，你可以从两个组件中使用该服务可能重复的不同页面@BradleyDotNEThelp me on this@SibeeshVenui如果我在LoginView组件中调用了两个或三个api，那么我能做什么？在这种情况下，你需要使用EventEmitter，订阅并发出事件。错误：未捕获（承诺中）：错误：StaticInjectorError（AppModule）[LoginView->SharedService]：StaticInjectorError（平台：core）[LoginView->SharedService]：NullInjectorError:没有SharedService的提供程序！错误：StaticInjectorError（AppModule）[LoginView->SharedService]：StaticInjectorError（Platform:core）[LoginView->SharedService]：NullInjectorError:没有SharedService的提供程序！在_NullInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js._NullInjector.get（core.js:1002）上，您需要提供新的服务。