javascript - 异步管道可观察覆盖闪烁 DOM

Question

我正在使用异步管道订阅 DOM 中的 Observable，如下所示:

<div *ngIf="item$ | async as item; else loading">
    ....
    <div>{{item.name}}</div>
</div>

一切正常。

但是，我有一个用户可以调用的刷新方法，它会再次发出网络请求，并再次返回可观察到的 item$。

所以，在我的 ts Controller 中:

this.item$ = this._itemService.getItem(url);

该项目映射到服务中。

但是，我再次设置item$。因此，在加载时，DOM 中的 item 会消失，因为它不再存在，然后一旦检索到新的 $item 就会回来。

如何在不让 item 在 DOM 中消失的情况下“刷新”$item？

Answer 1

正如您所说，您覆盖了 item$ 然后它需要一些时间才能发出。因此，您可以改用 Subject 并使其调用 this._itemService.getItem(url):

conts subject = new Subject<string>();

...

this.item$ = this.subject
  .switchMap(url => this._itemService.getItem(url));

然后你可以像使用 item$ | 一样使用它异步。当您想要更新 Observable 时，您只需向组件中的 Subject 发出一个新的 URL:

this.subject.next(newUrl);

async 管道将保持显示原始值，直到 getItem 发出新值，但这样它就不会闪烁。