时间戳

首页 > 解决方案 > 使用ionic 5将数据从firebase存储到firebase离线存储中

javascript - 使用ionic 5将数据从firebase存储到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 中？谢谢。

标签： javascriptangularfirebaseionic-frameworkgoogle-cloud-firestore

解决方案

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 {}

推荐阅读