使用ionic 5将数据从firebase存储到firebase离线存储中答案

【问题标题】：store data from firebase into firebase offline storage with ionic 5使用ionic 5将数据从firebase存储到firebase离线存储中
【发布时间】：2021-07-22 15:50:36
【问题描述】：

我是 ionic 方面的新手，有 angular 和 firebase。所以我想将我的firebase数据列表存储在缓存中，以便页面可以加载一次，因为目前我有很多数据，并且当用户每次进入页面时它会减慢应用程序的速度。请问我该如何处理我的问题？

这是我的模型

    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 中？谢谢.??????????

【问题讨论】：

标签： javascript angular firebase ionic-framework google-cloud-firestore

【解决方案1】：

AngularFire 提供了一个built-in feature for offline persistence。这对你来说是完全透明的，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 {}

【讨论】：