共享服务中的 BehaviorSubject 不向组件返回更新的值

Question

我有 2 个组件：TopBarComponent和UserDetailsComponent. TopBarComponent对所有页面都是通用的，因此UserDetailsComponent也一起加载。我添加了一个名为UserDetailsService.

UserDetailsS​​ervice.ts：

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

@Injectable()
export class UserDetailsService {
  public userData = new BehaviorSubject({});

  public setUserDetails(data: any) {
    this.userData.next(data);
  }

  public getUserDetails(): Observable<any> {
    return this.userData.asObservable();
  }
}

我正在UserDetailsService从TopBarComponent

TopBarComponent.ts

//setting data in Shared Service

this.userDetailsService.setUserDetails(result.data); 

当我订阅服务中的 getter 方法时，它总是只返回 的初始值BehaviorSubject。

用户详细信息组件.ts

this.userDetailsService.getUserDetails().subscribe(
  data => {
    console.log(data);    //prints '{}' always.
  },
  error => this.error(error)
);

当我获得 的更新值时UserDetailsService，我总是获得 的初始值BehaviorSubject。

我哪里做错了？任何帮助将不胜感激。

Answer 1

尝试将服务标记为全局的。

@Injectable({
    providedIn: 'root',
})
export class UserDetailsService

这应该可以解决问题。如果没有，则在导入所有组件或其模块的模块中提供它。

providers: [UserDetailsService],