прослушивать изменение служебной переменной от углового компонента - PullRequest
Новая
       30

прослушивать изменение служебной переменной от углового компонента

0 голосов
/ 20 марта 2019

У меня есть служба с переменной и метод, который переносит данные в эту переменную 

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 ОШИБКА TypeError: Невозможно прочитать свойство 'subscribe' из неопределенного

Ответы [ 2 ]

1 голос
/ 20 марта 2019

Я полагаю, что в основном вам нужны данные в компоненте, когда ваш запрос на получение завершен.

Решение 1: Рассмотрите возможность сделать userDetails в качестве наблюдаемой,.Таким образом, вы можете прослушивать его, когда значение в нем изменяется 

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. 

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

Внутри ваших компонентов 

constructor(private _userService: UserService) {}

ngOnInit() {
    this._userService.getUserProfile.subscribe((userDetails) => {
        console.log(userDetails)
    })
}
0 голосов
/ 20 марта 2019

У вашего сервиса просто есть это: 

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