Question

我在Angular2项目中使用AngularFire2来执行一项非常基本的任务，登录然后在页面上显示登录的用户信息。

我遇到的看似简单的问题是，我需要知道用户UID从Firebase请求数据（我的权限状态只能使用自己的UID访问“/ users”内的密钥 - 非常标准）。

我发现为了获取UID，我需要订阅af.auth observable，然后在里面使用af.auth.uid请求用户数据 - 我已经成功完成了。

我还注意到af.database.object创建了另一个observable，理论上我可以通过在我的HTML中使用Asyc来访问它。问题是我似乎无法在我的应用程序中的任何其他位置（特别是在HTML中）引用auth.subscribe中获取的用户数据。

我可以在console.log中订阅用户，这证实我正在获取数据。

请纠正我的理解或教我如何访问这些数据，我对Typescript和Observables的概念非常陌生。

Javascript Angular 2 Component

export class AppComponent {
  title = 'Webroot';
  user: FirebaseObjectObservable<any>;
  constructor(public af: AngularFire) {
    af.auth.subscribe(function(auth){
      if(auth != null){
        this.user = af.database.object("users/"+auth.uid)
        this.user.subscribe(user => console.log(user));
      }
      else{
        console.log("Auth is Null!")
      }
    });
  }
}

HTML

<div> {{ (user | async | json) }} </div>

Answer 1

使用箭头功能=>保存this关键字：

 export class AppComponent {
      title = 'Webroot';
      user: FirebaseObjectObservable<any>;
      constructor(public af: AngularFire) {
        af.auth.subscribe((auth)=>{
          if(auth != null){
            this.user = af.database.object("users/"+auth.uid)
            this.user.subscribe(user => console.log(user));
          }
          else{
            console.log("Auth is Null!")
          }
        });
      }
    }

你可以做得更好：

 @Injectable()
  class UserService{
     constructor(private af: AngularFire) {}

     getUser(){
         return this.af.auth.switchMap((auth)=>{
            return this.af.database.object("users/"+auth.uid)
         });
     }
}



export class AppComponent {
      title = 'Webroot';
      user: FirebaseObjectObservable<any>;
      constructor(public userService: UserService) {
        this.userService
            .getUser()
            .subscribe(user => console.log(user));
      }
    }

使用ChangeDetectorRef强制角度更新视图：

import { ChangeDetectorRef } from '@angular/core';

constructor(private af: AngularFire,public userService: UserService,private ref: ChangeDetectorRef) { }

 init(){
   this.userPublic = "Init";
   af.auth.subscribe((auth)=>{
          if(auth != null){
            this.getData(auth);
            this.userPublic = "Finish";
            this.ref.detectChanges(); 
          }
          else{
            //...
          }
        });

 }
}

使用AngularFire2访问经过身份验证的数据

1 个答案: