异步管道可观察覆盖刷新 DOM答案

【问题标题】：Async pipe observable overwrite flashes the DOM异步管道可观察覆盖刷新 DOM
【发布时间】：2018-08-06 11:28:01
【问题描述】：

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

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

一切正常。

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

所以，在我的 ts 控制器中：

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

项目在服务中映射。

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

我如何“刷新” $item 而不会让 item 在 DOM 中消失？

【问题讨论】：

为什么要替换流？只需向其中发送一个新的 value 即可，例如使用主题。
这就是我正在寻找的答案，不知道该怎么做。
我建议从相关的 RxJS 文档开始。我写了一种我在这里使用过的方法：blog.jonrshar.pe/2017/Apr/09/async-angular-data.html
@jonrsharpe 谢谢。我会多读一点。坚持使用具有不同 http 请求的不同方法。科目对我来说很新。有什么办法可以用我当前的设置做到这一点？
你必须改变一些事情；要么在您的组件中有一个主题，手动订阅您的服务调用并手动更新它，或者将 item$ 指向您的服务中的一个主题，当您在其上调用方法时将新值推送到该主题。

【解决方案1】：

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

conts subject = new Subject<string>();

...

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

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

this.subject.next(newUrl);

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

【讨论】：

正是我想要的。除了我将主题更改为 Observable 类型，所以现在我可以将任何我想要的“请求”传递给主题，所以我不限于每次都将 url 传递给同一个方法。谢谢。