Angular 2：许多异步管道与一个订阅

Posted 2023-03-13

【中文标题】Angular 2：许多异步管道与一个订阅

【英文标题】：Angular 2: many Async pipes vs one subscribe

【发布时间】：2016-12-25 04:57:31

【问题描述】：

什么对性能和“角度方式”更好：视图中有许多异步管道，或者组件中有一个订阅者具有取消订阅操作 onDestroy？

例子：

@Component(
  template: `<div>  post.title   post.author.name   post.category.name  </div>`
  ...
  )
class AppComponent 
  public post: Post;
  public postSubscription;

  ngOnInit() 
    postSubscription = someObservable.subscribe((post) => 
      this.post = post;
    )
  

 ngOnDestroy() 
    postSubscription.unsubscribe();
 

或

@Component(
  template: `<div>  postTitle | async   postAuthorName | async   postCategoryName | async  </div>`
  ...
  )
class AppComponent 
  public postTitle: Observable<string>;
  public postAuthorName: Observable<string>;
  public postCategoryName: Observable<string>;

  ngOnInit() 
    this.postTitle = someObservable.pluck('title');
    this.postAuthorName = someObservable.pluck('author', 'name');
    this.postCategoryName = someObservable.pluck('category', 'name');
  

【参考方案1】：

这是一个很好的问题。 我经常遇到对同一个 observable 使用多个异步管道的决定，而不是订阅 OnInit 和取消订阅 onDestroy。

【参考方案2】：

使用| async 管道效率更高，因为 Angular 会收到有关更改的通知。在第一个示例中，每个更改检测周期都会检查绑定。

【讨论】：

但是如果我将changeDetection 修改为ChangeDetectionStrategy.OnPush 并在订阅块中使用changeDetector.markForCheck()?

那大概和使用异步管道一样吧。