重置 ReplaySubject 值答案

【问题标题】：Reset ReplaySubject value重置 ReplaySubject 值
【发布时间】：2020-10-18 17:12:48
【问题描述】：

我有这样的文件结构：

facade.ts
state.ts
component.ts

在facade 我有：

...
getArticles(): Observable<Article> {
  return this.articleService.fetchAll();
}
...

在state 我有：

...
triggerArticlesFetch$ = new ReplaySubject<void>(1);

articles$ = this.triggerArticlesFetch$.pipe(
  switchMap(() => this.fc.getArticles()),
  shareReplay(1)
);

loadArticles(): void {
  this.triggerArticlesFetch$.next();
}

getArticles(): Observable<ArticleShare[]> {
  return this.articles$;
}
...

最后在component 我有：

...
`
  <span> {{ articles$ | async | json }} </span>
`
...
...
articles$: Observable<Article> = this.st.getArticles();

ngOnInit() {
  this.st.loadArticles();
}
...

但是我有一些“无效”这个数据的问题（组件是可重用的 - 并且状态包含以前的数据）。

每次我调用loadArticles() 时清除/重置为[]/null articles$（可能在状态文件中）的最佳方法是什么？

【问题讨论】：

"每次我调用loadArticles()" - 你的意思是每次初始化一个新组件时？
@MichaelD 某种是的......还想到了ngOnDestroy 内部的一些魔法 - 但我认为这是一个肮脏的黑客。
我已经用startWith 操作员发布了一个答案。请看看它是否有效。
抱歉，不小心删除了这个问题 :)) 有点像...但是如果我更新我的代码看起来像这样，它就不起作用了（所以，实际上又添加了一个 ReplaySubj 来添加 isFetching 状态） : loadArticles(): void { this.isArticlesFetching$.next(true); this.triggerArticlesFetch$.next(); } 文章$ = this.triggerArticlesFetch$.pipe(switchMap(() => this.fc.getArticles().pipe(switchMap(null))), tap(() => this.isArticlesFetching$.next(false)) , shareReplay(1) );以防我原来的问题 - >它有效。谢谢@MichaelD

标签： javascript angular rxjs rxjs-pipeable-operators

【解决方案1】：

从我的评论扩展（据我了解），每次初始化组件时，observable 应以[]（或null）开头。我能想到的最快解决方法是将startWith 传递到源代码。

试试下面的

状态

...
triggerArticlesFetch$ = new ReplaySubject<void>(1);

articles$ = this.triggerArticlesFetch$.pipe(
  switchMap(() => 
    this.fc.getArticles().pipe(
      startWith([]) // or `null` as per requirement
    )
  ),
  shareReplay(1)
);

【讨论】：

你能看看我的评论吗？