Question

我有以下缓存服务。 DataService仅使用HttpClient模块返回JSON数据。

@Injectable({
  providedIn: "root"
})
export class CategoryService extends DataService {
  constructor(public http: HttpClient) {
    super(environment.baseUrl + "category", http);
}

private cache$: Observable<Category>;

public get categories() {
  if (!this.cache$) {     
   this.cache$ = this.requestCategories().pipe(
     shareReplay(10) 
   );
 }

 return this.cache$;
}

private requestCategories(): Observable<Category> {
  return this.getAll(); // this is implemented in DataService
}

我有一个组件，可将返回的类别放在下拉列表中。我使用选择器将其添加到网页。这按预期工作。第一次通过服务时，没有缓存的数据，因此将其提取并存储，而下次使用缓存时。

我因此从类别组件中调用服务中的get属性：

  ngOnInit() {
    this.categories$ = this.categoryService.categories;
  }

但是，是的，这很麻烦：如果我从导航栏中转到该组件，则该服务总是返回以获取新数据。也就是说，它永远不会被缓存。这是路由器链接的HTML：

 <a class="nav-link" routerLink="/category">Category</a>

最重要的是，柯南，为什么服务总是返回来获取新数据，而不是使用缓存？

感恩节快乐！

Answer 1

我认为问题出在使用shareReplay()运算符。事实是，当没有订阅时，将清除“缓存”数据。

这与publishReplay(1).refCount()不同，在publishReplay(1).refCount()中，即使最后一个订户退订，也会保留高速缓存。

本文详细介绍了它： https://blog.angularindepth.com/rxjs-how-to-use-refcount-73a0c6619a4e

相关部分是 shareReplay做什么

因此，首先尝试使用localStorage。如果这样做没有帮助，则您可能需要将数据保存在<TextField required validateOnBlur field="cbu" label="22 dígitos del CBU" validate={validate.required} type="text" inputProps={ {maxLength: 22} } onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }}中。显然，如果刷新页面，则所有内存缓存都将消失。

Angular 5-缓存服务不适用于路由器链接

1 个答案: