angularjs - RxJS Observables,什么时候退订?

标签 angularjs rxjs angular2-observables angular

我有几个关于 Angular 的问题。我最近开始尝试使用 Angular 并且真的无法掌握何时应该取消订阅,显然建议使用 AsyncPipe 但在某些情况下无法使用它。

  • 如果我订阅服务中的 HTTP 请求,Observable 会自行取消订阅还是在整个应用程序生命周期内保持不变?

  • 当我订阅(不使用 AsyncPipe)组件中的 HTTP 请求时,我可以在 ngOnDestroy 生命周期 Hook 中手动取消订阅,这很好,但在我的例子中,我有一个提交方法来创建帐户

account.component.html

<account-item>
 *ngFor="let account of collection$"
 [data]="account"
</account-item>

account.component.ts

public collection$: Observable<Account[]>;
private subscription: Subscription;

 constructor(
  private service: AccountService
 ) {}

 ngOnInit() {
   this.collection$ = this.service.getAll()
 }

 createAccount(obj) {
  this.subscription = this.service.create(obj)
   .subscribe(
    success => this.collection$ = this.service.getAll(),
    error => Observable.throw(error)
  );
}

ngOnDestroy() {
 this.subscription.unsubscribe();
}

据我所知,订阅现在一直持续到我的 AccountComponent 被销毁,但是有没有办法在这里使用 AsyncPipe 代替,或者我在服务本身订阅更好?

我读过一些关于有限和无限 Observable 的内容,但并没有真正理解 Observable 何时是有限的。

  • 我面临的另一个问题是,在 success => this.collection$ = this.service.getAll() 中,当我使用 时,我的 UI 没有更新新帐户列表>ChangeDetectionStrategy.OnPush 但与 ChangeDetectionStrategy.Default
  • 配合使用效果很好

这是获取账户数据的服务方法

 getAll() {
  return this.http.get(ENDPOINT_ACCOUNT)
    .map((response: Response) => response.json().data)
}

最佳答案

在更全局地处理 Observables 和函数式编程时,您需要考虑的是,您不描述事情是如何完成的,而是描述事情是什么。

在您的示例中,您的集合一方面是从服务中初始获取的组合,另一方面是可能发生的所有更新的组合,因此如果您想避免在组件中订阅,您可以这样做一件事:

class Foo {
  public collection$: Observable < Account[] > ;
  private createAccount$ = new Subject<Account>();

  constructor(
    private service: AccountService
  ) {}

  ngOnInit() {
    let initialAccounts = this.service.getAll().share();
    let accountUpdate = initialAccounts.switchMap(()=>this.createAccount$.switchMap(account=>{
      return this.service.create(account).switchMap(()=>this.service.getAll())
    }))
    this.collection$ = Observable.merge(initialAccounts,accountUpdate);
  }

  createAccount(obj:Account) {
    this.createAccount$.next(obj);
  }

}

我们在这里使用 merge 运算符从 initialAccountscreateAccount$ 中获取数据。将您的可观察对象组合在一起并订阅一次总是一件好事,因为这样您就不必强制管理您的订阅。

事实是大多数时候,您根本不需要subscribe()

关于angularjs - RxJS Observables,什么时候退订?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43118284/

相关文章:

javascript - 将 Observable<T[]> 减少为 T[]

angularjs - 使用 Jasmine : Compiling a template not working to verify data output in template 进行 Angular 1.x 测试

javascript - 使用函数angularJS在ng repeat中返回增量ng repeat

javascript - 将 lodash every() 函数作为参数传递给 Rx.JS map() 运算符

javascript - RXjs 取消来自源的反跳

node.js - 如何使用 Angular 2 和 Node.js 开发实时文件上传?

angularjs - 在 Chrome 中禁用 "Angular Hint: Events, Modules, Controllers"

javascript - Angular Factory 对象持久存储在本地存储中

angular - 在 Angular 中导入 RxJS 运算符时出错

node.js - 无法从串联的 Observable 中提取/解开值