有一个来自 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 不会更改，并且组件不应在分页更改时重新加载。
最佳答案
看着source异步管道，你可以看到里面transform()功能:
if (obj !== this._obj) {
this._dispose();
return this.transform(obj as any);
}
如果有一个，如果它是一个新对象，则取消订阅先前的 Observable。因此，您可以安全地使用它。
关于angular - 如何在 Angular 9 中将分页与 Observables 和 AsyncPipe 结合起来？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62086000/