时间戳

首页 > 解决方案 > 重新分配通过异步管道使用的 Observable

angular - 重新分配通过异步管道使用的 Observable

问题描述

假设在我的Component我有一个Observable字段，它是通过Service检索的，它使用HttpClient

@Component(...)
export class MyComponent {
  items$: Observable<readonly Item[]>;

  ngOnInit() {
    this.items$ = this.findItems();
  }

  private findItems() {
    return this.service
      .getItems(...)
      .pipe(
        // Other code omitted
        toArray<Item>()
      );
  }
}

<app-items [items]="items$ | async"></app-items>

然后，当内部执行操作时MyComponent，我需要刷新该items$列表，因此我调用了服务

onButtonPressed() {
  this.items$ = this.findItems();
}

问题是，Async管道会自动订阅新的Observable吗？考虑到我的策略，我
是否需要要求 a ？ 最重要的是，这是正确的方法吗？detectChanges()OnPush

标签： angular

解决方案

ChangeDetectorRef#detectChanges要回答我自己的问题，是的，如果使用OnPush变更检测策略，则需要调用。

constructor(
  ...
  private readonly changeDetectorRef: ChangeDetectorRef
) {}

onButtonPressed() {
  this.items$ = this.findItems();
  this.changeDetectorRef.detectChanges();
}

如果不使用 second ，似乎没有“更好”的方式来做到这一点[Behavior]Subject。

编辑：我注意到重新分配和调用detectChanges会导致闪烁。
最后我选择了BehaviorSubject替代方案。

private readonly items = new BehaviorSubject<readonly Item[]>([]);

constructor(...) {
  items$ = this.items.asObservable(); 
}

...

this.findItems().subscribe(items => this.items.next(items));

因此，不再重新分配。

推荐阅读