Question

我是角色新手，我正在尝试通过Angularfire2制作用户登录组件。

我有2个主要文件，

1.app.component.ts（此页面上的登录按钮）。 2.user.service.ts（此文件中的所有用户功能）。

我尝试在应用程序组件上通过User.service.ts记录当前用户数据，但我得到了未定义。

app.component.ts

import { Component } from '@angular/core';
import { UserService } from './user.service' 
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
import * as firebase from 'firebase';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

  userDetail:firebase.User;
  constructor(public user:UserService){}

  ngOnInit(){
    this.user.getUserDetails();
  }

  onSubmit(){
    this.user.signInWithGmail();
  }

  onLogOut(){
    this.user.signOut();
    console.log("Logged Out!");
  }
}

user.service.ts：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
import * as firebase from 'firebase';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UserService {
  user:Observable<firebase.User>;
  userData: firebase.User;
  constructor(public afAuth:AngularFireAuth) { 
    this.user = this.afAuth.authState;
    console.log(Math.random());
    this.user.subscribe((user)=>
      {
        if(user){
          this.userData = user;
          console.log(user.displayName);

        }
      }
    );
  }

  signInWithGmail(){
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
  }

  signOut(){
    this.afAuth.auth.signOut();
  }
  getUserDetails(){
    console.log(this.userData);
  }
}

这是什么问题？谢谢。

Answer 1

使用Observables返回数据

getUserDetails(): Observable<any>{
    return this.afAuth.authState.map((auth) =>  {
        if(auth == null) {
          return false;
        } else {
          return auth;
       }
  });
}

在客户端

ngOnInit(){
    this.user.getUserDetails().subscribe(user=>{
       console.log(user);
    });
}

Angular 2 firebase使用谷歌提供商

1 个答案: