如何强制刷新 Angular2 中的 Observable 服务？

Question

在ngOnInit 中，我的组件获取用户列表，如下所示：

this.userService.getUsers().subscribe(users => {
    this.users = users;
});

userService.getUsers() 的实现如下所示：

getUsers() : Observable<UserModel[]> {
    return this.http.get('http://localhost:3000/api/user')
                    .map((res: Response) => <UserModel[]>res.json().result)
                    .catch((error: any) => Observable.throw(error.json().error || 'Internal error occurred'));
}

现在，在另一个组件中，我有一个可以创建新用户的表单。问题是当我使用第二个组件创建用户时，第一个组件不知道它应该向后端发出新的 GET 请求以刷新其用户视图。我怎样才能告诉它这样做？

我知道理想情况下我想跳过那个额外的 HTTP GET 请求，并简单地附加客户端在进行 POST 以插入数据时已经拥有的数据，但我想知道它是如何完成的在由于某种原因无法做到的情况下。

Answer 1

为了让 observable 在初始 Http observable 完成后能够提供值，它可以由 RxJS 主题提供。由于缓存行为是可取的，ReplaySubject 适合这种情况。

应该是这样的

class UserService {
  private usersSubject: Subject;
  private usersRequest: Observable;
  private usersSubscription: Subscription;

  constructor(private http: Http) {
    this.usersSubject = new ReplaySubject(1);
  }

  getUsers(refresh: boolean = false) {
    if (refresh || !this.usersRequest) {
      this.usersRequest = this.http.get(...).map(res => res.json().result);

      this.usersRequest.subscribe(
        result => this.usersSubject.next(result),
        err => this.usersSubject.error(err)
      );
    }

    return this.usersSubject.asObservable();
  }
  onDestroy() {
    this.usersSubscription.unsubscribe();
  }
}

由于主题已经存在，无需从服务器更新列表即可推送新用户：

this.getUsers().take(1).subscribe(users => 
  this.usersSubject.next([...users, newUser])
)

Answer 2

到目前为止，我处理此问题的方法是使用中介。 this.userService.getUsers() 返回一个 Rx.BehviorSubject，它在返回 http observable 时初始化。

类似的东西：

getUsers() : BehaviorSubject<UserModel[]> {
  return this.behaviorSubject;
}
updateUsers() {
    this.http.get('http://localhost:3000/api/user')
                    .map((res: Response) => <UserModel[]>res.json().result)
                    .catch((error: any) => Observable.throw(error.json().error || 'Internal error occurred'))
                    .subscribe((value) => {
                      this.behaviorSubject.next(value)});
}