angular - 订阅angular2

在我的项目中，我有一个在多个组件中使用的服务调用。是否可以在服务中有一个单独的方法来保存数据并调用该方法来获取数据。下面的第一个方法是获取可重用数据的服务调用，第二个方法是获取该数据的方法。但是每次使用它。救命！！！

 GetUserRoles(): Observable<LoggedInUserDetails> {
    return this.http.get(BaseUrl + GetUserRole).map((res: Response) => {
      var data = res.json();
      this.loggedInUser = data;
      return this.loggedInUser;
    })
  }



 getUserDetails() {
    return this.loggedInUser;
  }

使用上述方法的组件

export class IntiatedTravelSummaryComponent implements OnInit {
  public loggedInUser: LoggedInUserDetails;
  public id:number
  intiatedTravelRequestDetail: TravelReqForm;
  test:TravelReqForm[];
  test2:TravelReqForm[];
  constructor(private neuTravelService: NeuTravelService,private route:ActivatedRoute) {
   this.id =route.snapshot.params['TravellerId'];
   }

  ngOnInit() {
    this.loggedInUser =this.neuTravelService.getUserDetails();
      this.neuTravelService.GetIntiatedTravelDetails(this.loggedInUser).subscribe(data =>{ this.test = data;
  this.intiatedTravelRequestDetail= this.neuTravelService.getTravelSummaryDetails(this.id,this.test);
   console.log(this.intiatedTravelRequestDetail);
       });
     }
}

更新*
或者如果有人能告诉我如何将数据同步地传递给视图。
即this.intatedtravelrequestdetail显示服务调用内的值，但在调用后显示未定义的值。
如果有人能告诉我如何在数据加载后呈现视图

  ngOnInit() {
        this.neuTravelService.GetUserRoles().subscribe(data => {
          this.loggedInUser = data;
          this.neuTravelService.GetIntiatedTravelDetails(this.loggedInUser).subscribe(data =>{ this.test = data;
      this.intiatedTravelRequestDetail= this.neuTravelService.getTravelSummaryDetails(this.id,this.test);
       console.log(this.intiatedTravelRequestDetail);
           });
        });
        console.log(this.intiatedTravelRequestDetail);

         }
    }

最佳答案

正如您所注意到的，intiatedTravelRequestDetail在回调之外没有定义，这里有一个很好的答案，由我们的好先生@echonax:）：How do I return the response from an Observable/http/async call in angular2?
此异步事件还导致在检索数据之前呈现视图。因为您没有提供模板的示例，所以我猜this.intiatedTravelRequestDetail是一个对象，您希望从中显示属性。
您可以使用safe navigation operator，即?

{{intiatedTravelRequestDetail?.myProperty}}

这将保护空值。
你也可以把它包在一个*ngIf

<div *ngIf="intiatedTravelRequestDetail">
  {{intiatedTravelRequestDetail.myProperty}}
</div>

除非intiatedTravelRequestDetail中有值，否则不会呈现视图的该部分。
希望这有帮助！：）