在Angular 4中的同級組件之間共享從rest調用返回的數據

Question

這是我的主要組成部分：

import { Component, OnInit } from '@angular/core';
import { MyService } from '../my-service.service';
import { DataShareService } from '../data-share-service.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  private myCustomer: Object;

  constructor(private myService: MyService) { }

  ngOnInit() {    
    this.getMyCustomerProfile();
    console.log("In Home: " + JSON.stringify(this.myCustomer)); // this prints undefined - why ?

    // this.dataShareService.currentCustomer.subscribe(customer => this.customer = customer);
    // this.dataShareService.changeCustomer(this.customer);
  }

  private getMyCustomerProfile(){
    this.myService.getProfile()
    .subscribe(
      customer => {
          this.myCustomer = customer;
          console.log("In Home: " + JSON.stringify(this.myCustomer)); // this prints the returned json properly
      },
      error => {
          console.log("Error fetching user profile!");
      });

     console.log("In Home: " + JSON.stringify(this.myCustomer)); // this prints undefined - why ?    
  }
}

MyService getProfile方法是一個getProfile調用：

getProfile(){
  return this.http.get(this.config.myUrl + 'mycustomer/', this.options).map((response: Response) => response.json());
 }

問題1：為什么console.log內getMyCustomerProfile's subscribe方法正確打印返回的對象JSON但其他兩個console.log打印undefined ？

問題2：此外，如何使用共享服務與同級組件（​​而不是子組件）共享上述組件中返回的對象？

我在下面嘗試過，但是沒有用。

共享服務：

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

@Injectable()
export class DataShareService {

  private customerSource = new BehaviorSubject<Object>("default customer");
  currentCustomer = this.customerSource.asObservable();

  constructor() { }

  changeCustomer(customer: Object){
    console.log("In Service: "+customer);
    this.customerSource.next(customer);
  }
}

兄弟：

import { Component, OnInit } from '@angular/core';
import { DataShareService } from '../data-share-service.service';

@Component({
  selector: 'app-sibling',
  templateUrl: './sibling.component.html',
  styleUrls: ['./sibling.component.css']
})
export class SiblingComponent implements OnInit {

  private myCustomer: Object;

  constructor(private dataShareService: DataShareService) { }

  ngOnInit() {
    this.dataShareService.currentCustomer.subscribe(customer => this.myCustomer = customer);
  }
}

HTML模板兩個HomeComponent和SiblingComponent正在打印從返回的對象的屬性：

Welcome {{myCustomer?.name}}

這正確打印HomeComponent但不是在SiblingComponent 。 意味着沒有共享數據。 我不確定我在做什么錯。

謝謝閱讀！

Answer 1

1. 都是異步的。 當在外部subscribe （或基本上在運算符鏈之外）中使用console.log它將在發出任何值之前被調用，因此它是undefined 。

2. 只需將值分配給服務類中的屬性即可：

    .subscribe(customer => this.myService.myCustomer = customer) 

   如果您需要同級組件能夠在myCustomer異步更改時做出反應，則使其成為BehaviorSubject （或者在這種情況下， ReplaySubject(1)也會這樣做）。

    .subscribe(customer => this.myService.myCustomer.next(customer)) 

Answer 2

感謝Martin的投入。

將我的getMyCustomerProfile方法更新為以下工作方式：

 private getMyCustomerProfile(){
    this.myService.getProfile()
    .subscribe(
      customer => {
          this.dataShareService.changeCustomer(customer);
      },
      error => {
          console.log("Error fetching user profile!");
      });
  }

並通過以下行在同級和主要組件中訂閱相同的內容：

this.dataShareService.currentCustomer.subscribe(customer => this.customer = customer);