从组件角度监听服务变量变化答案

【问题标题】：listen to service variable change from component angular从组件角度监听服务变量变化
【发布时间】：2019-08-11 01:37:25
【问题描述】：

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

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

现在我想在变量更改时从组件中检查并读取它。我该怎么做？

更新。

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 错误类型错误：无法读取属性“订阅” 未定义的

【问题讨论】：

创建一个Subject并在userDetails变化时给它加值，订阅组件中的Subject？
你能写出这样的答案吗？我是角度新手
是的，所以在我这样做之前，您最终需要userDetails 吗？在你的组件中？还是在服务中？
userDetails 已在服务中声明。并且服务具有将新数据获取到该变量中的方法。我需要的是从组件监听到变量的变化。如果它改变了将数据抓取到组件。所以在组件中，我希望在更改事件时使用相同的 userDetails 变量更新表单服务变量。

标签： angular variables service components

【解决方案1】：

让你的服务有这个：

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({
            next: res=> {this.userDetails=res}
        });
    }
}

【讨论】：

只有当 ngOnInit() 问题是组件已经被渲染时才会发生这种情况。
我已经对其进行了测试，它仅在渲染所有组件时才从头开始工作。但我希望它在我调用该服务之后也能正常工作

【解决方案2】：

相信你的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)
    })
}

【讨论】：

只有当 ngOnInit() 问题是组件已经被渲染时才会发生这种情况。
我已经对其进行了测试，它仅在渲染所有组件时才从头开始工作。但我希望它在我调用该服务之后也能正常工作
@David：它是一个subscription，您在初始化组件时创建了它，并且该订阅将一直监听userDetails 中的更改，直到订阅被终止。
我正在尝试以我的方式做到这一点，请阅读问题更新。但我得到错误。我知道我做错了什么，你能检查一下具体是什么吗？
@David：错误表明它是正确的，服务类变量userDetails 在开始时没有值（subscription() 也不会存在于普通数据类型上）。你没听我的回答吗？我已将 userDetails 初始化为主题..