正确使用持久数据的方法

问题描述 投票:3回答:2

我试图只从数据库中获取items一次(我不指望它们会改变)。当我最初加载home-page.component.ts时HomePageComponent.items被正确设置但是如果我从HomePageComponent导航到ProfilePageComponent然后回到HomePageComponent因为itemsService.items$已经解决了订阅回调没有重新运行而且HomePageComponent.items没有重新初始化。这是我正在使用的当前解决方法,但是处理这种情况的正确方法感觉太笨重了。

家庭page.component.ts

ngOnInit() {
    this.itemsService.items$.subscribe((items:item) => {
      // Is only called once after items are initalially fetched over http
      this.items = items;
      this.itemsService.addItems(items);
    });

    if(this.itemsService.foundItems){
      this.items= this.itemsService.items;
    }
}

items.service.ts

export class ItemsService {

  private items = new BehaviorSubject(null);
  items$ = this.items.asObservable();

  foundItems = null;

  constructor(private httpClient: HttpClient){
    this.items.next(httpClient.post<any>(myUrl,myQuery).subscribe(this.items));
  }

  addItems(items){
   this.foundItems = items;
  }
}
angular rxjs observable
2个回答
6
投票

组件不应该知道任何缓存,您需要抽象它。该服务可以缓存检索到的项目,然后使用of将项目返回到包含在observable中的任何后续调用。服务本身可以使用tap缓存调用的结果。

家庭page.component.ts

ngOnInit() {
    this.itemsService.getItems().subscribe((items) => {
      this.items = items;
    });
}

items.service.ts

import { map, tap } from 'rxjs/operators';
import { of } from 'rxjs';

export interface IItem {
}

export class ItemsService {

  items: IItem[];

  constructor(private httpClient: HttpClient){
  }

  getItems() : Observable<IItem[]> {
    return this.items 
        ? of(this.items)
        : this.httpClient.get<IItem[]>(myUrl).pipe(tap((data) => this.items = data));
  }
}

出于示例的目的,我添加了一个名为IItem的接口,因此我可以强烈地键入调用和签名。您可以使用您需要的任何接口类型替换它。


0
投票

取消订阅您的观察者破坏主页组件。

itemOb: any;

把它当作全球性的

ngOnInit() {
    this.itemOb = this.itemsService.items$.subscribe((items:item) => {
      // Is only called once after items are initalially fetched over http
      this.items = items;
      this.itemsService.addItems(items);
    });

    if(this.itemsService.foundItems){
      this.items= this.itemsService.items;
    }
}
    ngOnDestroy() {
if (this.itemOb) {
    this.itemOb.unsubscribe(); }
    }

试试这个你的问题可以解决

© www.soinside.com 2019 - 2024. All rights reserved.