將來自 firebase 的數據存儲到 firebase 離線存儲與 ionic 5

Question

我是 angular 和 firebase 的離子新手。 所以我想將我的 firebase 數據列表存儲在緩存中，以便頁面可以加載一次，因為目前我有很多數據，並且每次用戶進入頁面時都會減慢應用程序的速度。 請問我該如何處理我的問題？

那是我的 model

    import { Media } from './Media';
    export class Post {
        id?: string;
        icone: string;
        owner?: string;
        titre?: string;
        description?: string;
        medias?: Array<Media> = new Array();
        mediasThumbnail?: Array<Media> = new Array();
        abonnees?: Array<string> = new Array();
        typePost?: string; // Formation, Projet, ...
        refSrc?: string;
        date?;
        location?: string;
        userSaved: string[] = new Array();
        userDel: string[] = new Array();
        debut;
        fin;
        breComment: number;enter code here
        descriptioncourte: string;
        competences?: string[];
        userliked?: string[] = new Array();
        userviewed?: string[] = new Array();
        }

那是我的服務

    import { Injectable } from '@angular/core';
        import * as firebase from 'firebase';
        import { Post } from '../models/Post';
        import {
          AngularFirestoreCollection,
          AngularFirestore,
        } from "@angular/fire/firestore";
        @Injectable({
          providedIn: 'root'
        })
        export class PostService {
          db: firebase.firestore.Firestore;
          readonly path = "posts";
          constructor(private afs: AngularFirestore) {
            this.db = firebase.firestore();
          }
        
        
          findByfilters(keys: string[], operator: firebase.firestore.WhereFilterOp[], values: any[], orderby?: string): firebase.firestore.CollectionReference {
        
            let query;
            let i = 0;
            keys.forEach(s => {
                if (!query) {
                    query = this.db.collection(this.path).where(s, operator[i], values[i]);
                } else {
                    query = query.where(s, operator[i], values[i]);
                }
        
                i++;
            });
            if (!query) {
                query = this.db.collection(this.path);
            }
            if (orderby) {
                return query.orderBy(orderby);
            }
            return query;
        }
        
         }
    
   

然后這就是我列出數據的方式

class MyPage {
  constructor(private postSvc: PostService) {
      this.postSvc.
      findByfilters(this.keys, 
        this.operator, 
        this.values).onSnapshot((data) => {
        this.postitems = new Array<Post>();
        data.forEach(async (item) => {
          const post = item.data() as Post;
          post.id = item.id;
          this.postitems.push(post);
        })
      });
  }
}

請有人幫我展示如何實現我的服務以離線保存我的數據在 firebase 中？ 謝謝。

Answer 1

AngularFire 為離線持久性提供了內置功能。 這對你來說是完全透明的，當沒有可用的連接時， db.collection()將簡單地返回 AngularFire 在其緩存中存儲的內容。

要啟用它，您只需在模塊中添加AngularFirestoreModule.enablePersistence() （可能是app.module.ts ）。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule.enablePersistence(), // <--- HERE
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}