Правильный способ иметь постоянные данные в обслуживании - PullRequest
Новая
       15

Правильный способ иметь постоянные данные в обслуживании

0 голосов
/ 28 февраля 2019

Я пытаюсь получить items из базы данных только один раз (я не ожидаю, что они изменятся).При первоначальной загрузке home-page.component.ts значение HomePageComponent.items устанавливается правильно, однако, если я перемещаюсь от HomePageComponent к ProfilePageComponent, а затем обратно к HomePageComponent, поскольку itemsService.items$ имеетуже решен, обратный вызов подписки не перезапускается и HomePageComponent.items не инициализируется повторно.Это текущий обходной путь, который я использую, но он кажется слишком неуклюжим, чтобы быть правильным способом решения этой ситуации.

home-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;
  }
}

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Компонент не должен знать о каком-либо кэшировании, вам необходимо это абстрагировать.Служба может кэшировать извлеченные элементы и затем возвращать эти элементы к любым последующим вызовам, заключенным в наблюдаемую форму, используя of.Сам сервис может кэшировать результат вызова, используя tap.

home-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 голосов
/ 28 февраля 2019

отмените подписку вашего наблюдателя на уничтожение компонента домашней страницы. 

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(); }
    }

Попробуйте, ваша проблема может быть решена

...