如何获得观察值？

Question

我在这里跟着AngularFire教程：https://angularfirebase.com/lessons/google-user-auth-with-firestore-custom-data/。我的问题是：我将如何获取当前登录的用户的UID和displayName在不同的组件？我已经导入并注入AuthService（下面的服务），但是如何访问Firestore中的这些字段？以下是相关的代码。

@Injectable() 
export class AuthService { 
    user: Observable<User>; 
    constructor(private afAuth: AngularFireAuth, 
       private afs: AngularFirestore, 
       private router: Router) { 
     //// Get auth data, then get firestore user document || null 
     this.user = this.afAuth.authState 
     .switchMap(user => { 
      if (user) { 
      return this.afs.doc<User>(`users/${user.uid}`).valueChanges() 
      } else { 
      return Observable.of(null) 
      } 
     }) 
    } 

    googleLogin() { 
    const provider = new firebase.auth.GoogleAuthProvider() 
    return this.oAuthLogin(provider); 
    } 

    private oAuthLogin(provider) { 
    return this.afAuth.auth.signInWithPopup(provider) 
     .then((credential) => { 
     this.updateUserData(credential.user) 
     }) 
    } 

    private updateUserData(user) { 
    // Sets user data to firestore on login 
    const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`); 
    const data: User = { 
     uid: user.uid, 
     email: user.email, 
     displayName: user.displayName, 
     photoURL: user.photoURL 
    } 
    return userRef.set(data) 
    } 

    signOut() { 
    this.afAuth.auth.signOut().then(() => { 
     this.router.navigate(['/']); 
    }); 
    } 
} 

Answer 1

我的问题是：如何将获取当前用户的UID 和显示名在不同的组件签署？

在不同的组件中，您可以注入此authService并可以使用可观察的user属性。

如果你想在唯一组件使用它：

user: User; 
constructor(public auth: AuthService) { } 

现在，您可以订阅的auth.user例如：

ngOnInit() { 
    this.auth.user.subscribe((user) => { 
    this.user = user; 
    console.log(user) 
    /* user.uid => user id */ 
    /* user.displayName => user displayName */ 
    }) 
} 

或只是在HTML：

<div *ngIf="auth.user | async as user"> 
    <h3>Howdy, {{ user.displayName }}</h3> 
    <img [src]="user.photoURL"> 
    <p>UID: {{ user.uid }}</p> 
    <p>Favorite Color: {{ user?.favoriteColor }} </p> 
</div>