在组件

Question

这是Angular 6，Firestore和Firebase项目。我想显示其他要登录的用户的用户信息。我正在使用 Firebase 进行身份验证，并使用 Firestore 来保存有关我的用户的其他数据，例如他们的{{1 } s。我的数据库看起来像这样。

身份验证（Firebase）

1. 电子邮件= one@gmail.com
   userId = 101
2. 电子邮件= two@gmail.com
   userId = 202

Firestore用户集合

1. 电子邮件= one@gmail.com
   userId = 101
   displayName = oneDisplayName

2. 电子邮件= two@gmail.com
   userId = 202
   displayName = twoDisplayName

我有一个displayName可以在我的应用程序中管理这两者。使用此服务，我想做的是（a）当某人登录时，从user.service.ts中拉出他们的displayName（b）设置Firestore Users Collection等于我的服务中的变量（ c）将我的服务注入任何组件，并在displayName中显示displayName。我可以在服务中获取component.html，但无法成功将其传输到组件。

这是代码。什么是更好的方法呢？

user.service.ts

displayName

navbar.component.ts

## imports and @injectable are up here ## 

export class UserService {
  usersCollection: AngularFirestoreCollection<User>;
  users: Observable<User[]>;
  user: Observable<firebase.User>;
  username: string;

  constructor(private afAuth: AngularFireAuth,
              private router: Router,
              private afs: AngularFirestore) {
      this.usersCollection = this.afs.collection('users');
      this.users = this.usersCollection.valueChanges();
      this.user = afAuth.authState;

      this.user.subscribe(user => {
          if (user === null) {
            this.loggedIn = false;
          } else {
            this.loggedIn = true;
            this.usersCollection.doc(`${user.uid}`).ref.get()
              .then((doc) => {
                this.username = doc.data().displayName; <-- WORKS IN SERVICE BUT NOT COMPONENT ####
              });
          }
      });
   }

navbar.component.html

import { UserService } from '../user.service';

export class NavbarComponent {
  username;

  @Component({
    providers: [ UserService ]
  })

  constructor(private userserv: UserService) {
    this.username = this.userserv.username; <-- UNDEFINED
  }
}

Answer 1

要始终从服务中获取最新值，请在组件类中将属性定义为getter：

public get displayName(): string {
  return this.userserv.username;
}