javascript - Angular 2 : many Async pipes vs one subscribe

标签 javascript angular typescript rxjs

什么对性能和“Angular 方式”更好:在 View 中有许多异步管道或在组件中有一个订阅者在 Destroy 上有取消订阅操作?

例子:

@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');
  }
}

最佳答案

使用| async 管道更高效,因为 Angular 会收到有关更改的通知。对于第一个示例,每个更改检测周期都会检查绑定(bind)。

关于javascript - Angular 2 : many Async pipes vs one subscribe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39015185/

相关文章:

javascript - 仅适用于苹果 iphone 的 CSS hack

javascript 抛出未捕获的类型错误 : Cannot set property '0' of undefined when filling multidimensional array

angular - Ionic 4/Angular - 验证突出显示超出 native 输入字段

javascript - 在 AppModule 声明后添加提供程序

node.js - 在 WebStorm 中为 Mocha 运行 typescript 测试

typescript - 在 TypeScript 中共同组织类/模块

javascript - 动态波浪路径/边框

angular - Angular 4 的国际化

javascript - Node4 使用 gulp 支持 TypeScript 到 EcmaScript2015

javascript - 非常基本的 React + NodeJS 获取 : Why is my response not what I want?