angular - 如何在 Angular 9 中将分页与 Observables 和 AsyncPipe 结合起来？

Question

有一个来自 API 的产品列表。产品分页，用户可以切换到另一个页面。简化的模板如下所示:

<ul>
  <li *ngFor="let product of products$ | async">{{ product.name }}</li>
</ul>

<button type="button" (click)="gotoPage(1)">1</button>
<button type="button" (click)="gotoPage(2)">2</button>

该组件看起来像这样:

export class ProductsComponent implements OnInit {
  products$: Observable<Product[]>;

  constructor(
    private service: ProductService
  ) { }

  ngOnInit() {
    this.products$ = this.service.getAll({page: 1});
  }

  gotoPage(page: number): void {
    this.products$ = this.service.getAll({page: page});
  }
}

我的问题是:
这是更新 Obersavble 的正确方法吗？或者这会产生内存泄漏吗？

请注意:URL 不会更改，并且组件不应在分页更改时重新加载。

Answer 1

看着source异步管道，你可以看到里面transform()功能:

if (obj !== this._obj) {
  this._dispose();
  return this.transform(obj as any);
}

如果有一个，如果它是一个新对象，则取消订阅先前的 Observable。因此，您可以安全地使用它。