从组件角度听取服务变量的变化

Question

我有变量和方法的服务，将数据带到该变量

export class UserService {
  userDetails;
  getUserProfile(){
    return this.http.get(this.BaseURI+'/UserProfile').subscribe(
      res=>{
        this.userDetails=res;
      //  console.log(res);
      },
      err=>{
        console.log(err);
      }
    );
  }

现在我想在变量变化时从组件中检查并读取它。我怎样才能做到这一点 ？

UPDATE。

export class UserService {
  userDetails;

  getUserProfile(){
  this.http.get(this.BaseURI+'/UserProfile').subscribe(
    res=>{
      this.userDetails=res;
    },
    err=>{
      console.log(err);
    }
  )
  }

在组件我有这个：

  ngOnInit() {
    this.service.userDetails.subscribe((userDetails) =>this.userDetails=userDetails)
  }

现在，当我运行应用程序时，我得到组件中的错误：

AppComponent.html：2 ERROR TypeError：无法读取未定义的属性“subscribe”

Answer 1

我相信当你的get请求完成时，你基本上需要组件中的数据。

解决方案1：考虑将userDetails作为Observable，。这样，当它中的值发生变化时，您可以收听它

export class UserService {

    private _userDetails: Subject<any> = new Subject<any>();    // consider putting the actual type of the data you will receive
    public userDetailsObs = this._userDetails.asObservable();
    getUserProfile(){
        return this.http.get(this.BaseURI+'/UserProfile').subscribe(
          res=>{
            this._userDetails.next(res)
          //  console.log(res);
          },
          err=>{
            console.log(err);
          }
        );
    }
}

在您的组件内

constructor(private _userService: UserService) {}

ngOnInit() {
    this._userService.userDetailsObs.subscribe((userDetails) => {
        console.log(userDetails)
    })
}

---

解决方案2.考虑只返回HTTP observable本身。

getUserProfile(){
    return this.http.get(this.BaseURI+'/UserProfile');
}

在您的组件内

constructor(private _userService: UserService) {}

ngOnInit() {
    this._userService.getUserProfile.subscribe((userDetails) => {
        console.log(userDetails)
    })
}

Answer 2

你的服务就是这样：

export class UserService {
  getUserProfile(){
   return this.http.get(this.BaseURI+'/UserProfile');
 );
}

然后在您的组件中，您订阅它。

import { Component, OnInit } from '@angular/core';
import {ServiceName} from '../servicename.service';

export class ViewComponent implements OnInit {

constructor(private serviceName:ServiceName) { }
public userDetails={};
ngOnInit() {
 this.serviceName.getUserProfile().subscribe(res=>this.userDetails=res);
  }
}