如何获得最后发射的Observable [英] How to get last emitted Observable

问题描述

我创建了一个Angular服务，该服务基本上是使用一些用户信息来设置对象的.当我更改用户时，该服务将发出可观察到的信息，并由同级组件捕获以更新信息.问题是我第一次设置数据时，还没有人订阅，所以我得到了一个未定义的值.我已经读过有关使用publish()或share()将可观察对象转换为热"对象的信息，但是我对RxJS还是很陌生，我仍然不了解它如何以100％的速度工作，所以我有点迷茫. /p>

服务代码(相关部分):

getFwcUser() : Observable<FwcUser> {
  return this.subjectFwcUser.asObservable();
}

setFwcUser(user : FwcUser) {
  this.fwcUser = user;

  this.subjectFwcUser.next(this.fwcUser);
}

注意:FwcUser是带有某些用户字段的接口.我在按钮处理程序中运行setFwcUser来选择用户.

已故订户(组件代码):

ngOnInit() {
  this.fwcUserService.getFwcUser()
    .subscribe(
      (user : FwcUser) => { console.log('Received: ', user); this.fwcUser = user; }
  );
  [......]
}

始终打印:已接收:未定义". 注意:该组件位于'* ngIf ="fwcUser"'内部，因此当我从同级组件调用'setFwcUser'时正在加载它.

如何获取此组件以读取丢失的值?

还有，有人可以为初学者推荐一个很好的资源来学习RxJS吗?我正在阅读有关Angular4的几本书，但没有一本书能清楚地说明这一点...

谢谢！

解决方案

BehaviorSubject 是这里的答案. BehaviorSubject而不是仅在传入它们时发出值的标准主题(Observable)，而是在subscribe()时发出最后一个值.您还可以使用BehaviorSubjects getValue()方法手动获取最后一个值.

关于下面的代码，有一点需要注意的是，BehaviorSubject声明中的null块表示初始化时BehaviorSubject的初始值.您可以保留它，也可以用一个值预先填充它.

服务

已更正了一些键入错误.

 fwcUser: BehaviorSubject<FwcUser> = new BehaviorSubject<FwcUser>(null);
fwcUser$ = this.fwcUser.asObservable();

// Set the value of the fwcUser
updateFwcUser(user) {
    this.fwcUser.next(user);
}
 

组件

 // Subscribe to the BehaviorSubject
ngOnInit() {
    this.fwcUserService.fwcUser$.subscribe(_fwcUser => {
        this.fwcUser = _fwcUser
    }
}

// Get the current (previously emitted) value manually
getFwcUser() {
    this.fwcUser = this.fwcUserService.fwcUser.getValue();
}
 

I've created an Angular service that basically sets an object with some user information. When I change the user, the service emits an observable, captured by some sibling components to update the info. The problem is that the first time I set the data, there's no one subscribed yet, so I get an undefined value. I've read about converting the observable to 'hot' using publish() or share() but I'm pretty new to RxJS and I still haven't understood how it works at 100% so I'm a little lost.

The service code (the relevant part):

getFwcUser() : Observable<FwcUser> {
  return this.subjectFwcUser.asObservable();
}

setFwcUser(user : FwcUser) {
  this.fwcUser = user;

  this.subjectFwcUser.next(this.fwcUser);
}

NOTE: FwcUser is an interface with some user fields. I run setFwcUser inside a button handler to choose the user.

The late subscriber (component code):

ngOnInit() {
  this.fwcUserService.getFwcUser()
    .subscribe(
      (user : FwcUser) => { console.log('Received: ', user); this.fwcUser = user; }
  );
  [......]
}

Always prints: 'Received: undefined'. NOTE: The component is inside an '*ngIf="fwcUser"', so it's being loaded when I call to 'setFwcUser' from a sibling component.

How could I get this component to read the lost value?

Also, could someone recommend a good resource to learn about RxJS for beginners? I'm reading a couple of books on Angular4 but none of them explain it clearly...

Thanks!

解决方案

BehaviorSubject is the answer here. Rather than a standard subject (Observable) that just emits values as they come in, a BehaviorSubject emits the last value upon subscribe(). You can also get the last value manually using the BehaviorSubjects getValue() method.

One note to make about the code below is that the null block in the BehaviorSubject declaration represents the initial value of the BehaviorSubject upon initialization. You could either leave it, or pre-populate it with a value.

Service

EDITED: Corrected a couple of typing errors.

fwcUser: BehaviorSubject<FwcUser> = new BehaviorSubject<FwcUser>(null);
fwcUser$ = this.fwcUser.asObservable();

// Set the value of the fwcUser
updateFwcUser(user) {
    this.fwcUser.next(user);
}

Component

// Subscribe to the BehaviorSubject
ngOnInit() {
    this.fwcUserService.fwcUser$.subscribe(_fwcUser => {
        this.fwcUser = _fwcUser
    }
}

// Get the current (previously emitted) value manually
getFwcUser() {
    this.fwcUser = this.fwcUserService.fwcUser.getValue();
}

这篇关于如何获得最后发射的Observable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！