AngularFire и Firestore - запрашивает коллекцию один раз во время навигации по компонентам

Question

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

Компонент 1

Компонент 1 - это список художников, хранящихся в коллекции Firestore company/artists

Компонент 2

Компонент 2 - это список альбомов любого исполнителя, хранящихся в коллекции Firestore company/albums

Я подключаю исполнителя к альбому с помощью artist_id указано в каждом документе альбома.

У меня есть служба, на которую есть ссылка в компоненте. Сервис содержит запрос на сбор angularfire, который я инициирую в конструкторе сервиса. Я поместил консольный журнал в функцию запроса, чтобы регистрировать, когда функция вызывается. По сути, я хочу, чтобы запрос альбомов выполнялся только один раз, даже когда я возвращаюсь назад к компоненту исполнителей и возвращаюсь, я не хочу, чтобы он снова запускался. Если я добавляю новый элемент в список, я бы хотел синхронизировать c, что он и делает.

Однако, сейчас, хотя console.log('get all items called'); запускается только один раз, когда я перемещаюсь по компонентам, console.log('data = ', data) запускается каждый раз, когда я go запускаю компонент альбомов, что заставляет меня думать, что я я действительно запрашиваю базу данных каждый раз.

Вопросы

1. Как мне убедиться, что этот запрос выполняется только один раз?
2. Как сделать Я отвечаю на вопрос 1, но также синхронизирую c какие-либо новые изменения в списке из базы данных?
3. Или я действительно сделал это правильно?

Компоненты альбомов

import { Component, OnInit } from '@angular/core';
import { AlbumItemsService } from '../services/category-items.service';

@Component({
   selector: 'app-album-items',
   templateUrl: './album-items.component.html',
   styleUrls: ['./album-items.component.css']
 })

export class AlbumItemsComponent implements OnInit {
  constructor(public albumItemsService: AlbumItemsService) { }
  ngOnInit(): void {}
}

Сервис

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class AlbumItemsService {

   private itemsCollection: AngularFirestoreCollection<any>;
   items: Observable<any[]>;

   constructor(private afs: AngularFirestore) { 
     console.log('Album Item Service Called')
     this.getAllItems();
   }

   getAllItems(){
      console.log('get all items called');
      this.itemsCollection = this.afs.collection<any>('url');
      this.items = this.itemsCollection.snapshotChanges().pipe(
         map(actions => actions.map(a => {
         const data = a.payload.doc.data();
         const id = a.payload.doc.id;
         console.log('data = ', data)
         return { id, ...data };
      }))
  );
 }
}

HTML

<ul>
  <li *ngFor="let item of AlbumItemsService.items | async">
    {{ item.item_title }}
  </li>
</ul>

---

ОБНОВЛЕНИЕ

Я испортил собственный код пожарного магазина вместо angularfire.

this.db.collection("collection").onSnapshot((querySnapshot) => {
    var cities = [];
    querySnapshot.forEach((doc) => {
        cities.push(doc.data());
    });
    console.log("cities = ", cities);
});

Этот кажется , как будто он не запрашивает базу данных каждый раз. Кто-нибудь может подтвердить?

Answer 1

Я смотрю в основном в вашем "ОБНОВЛЕНИИ". Если вы хотите запросить коллекцию, вы должны использовать .get вместо .onSnapshot, ссылку можно найти здесь .