首页 > 解决方案 > 如果用户在 Angular 10 中重新加载页面,如何维护 Firebase 数据?

问题描述

将 Angular 与 Firebase 结合使用,并使用AngularFireAuthGuard.

角度路线

首页 -> 简介

使用服务从firebase获取用户的全部数据db.service.ts

db.service.ts

      getMemberInfo() {
        return new Promise((resolve, reject) => {
          this.members.onSnapshot(snapshot => {
            this.memberDocs.next(snapshot.data());
            resolve(snapshot.data());
          }, reject);
        });
      }

app.component.ts

    this.dbService.getMemberInfo().then((status)=>{
        console.log(status);
        if(!status){
            alert("Not Working");
        }
      })   

profile.component.ts

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any
      {
         
          return new Promise((resolve, reject) => {
    
              Promise.all([
                  this.getMember(),
              ]).then(
                  () => {
                      resolve(true);
                  },
                  reject
              );
          });
      } 
    
      getMember(){
        return new Promise<any>((resolve,reject)=>{
          this._dbService.memberDocs.t((value)=>{
            this.memberData = value;
            console.log(value)
            resolve(this.memberData)
          })
        })   
      }

当我们的用户刷新个人资料页面时,它不会获取数据。我首先从 App Component 获取数据,然后我可以在应用程序的任何位置访问它。

当用户来到个人资料页面时,如果他们想刷新页面,他们将获得数据。请建议使用 Firebase 的最佳方法。

标签: javascriptangularfirebasegoogle-cloud-firestoreangular-router

解决方案


您可以尝试在使用 ngOnInit 加载页面时获取数据。


推荐阅读