3

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

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

  • 当我订阅（没有 AsyncPipe）组件中的 HTTP 请求时，我可以在 ngOnDestroy 生命周期挂钩中手动取消订阅，这很好，但在我的情况下，我有一个提交方法来创建帐户

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 或者我在服务本身中订阅更好？

我读过一些关于有限和无限 Observables 的内容，但并没有真正理解 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)
}
4

1 回答 1

1

在更全球化地处理 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运算符从initialAccounts或中获取数据createAccount$。将您的 observables 组合在一起并订阅一次总是一件好事，因为这样您就不必强制管理您的订阅。

事实是大多数时候，你根本不需要subscribe()。

于 2017-03-30T12:59:14.630 回答