角度服務返回未定義到組件

Question

我想將返回值傳遞給我的組件。 我使用 firebase 編寫了這項服務。 在我的組件中調用 geLoggedInUser 方法時，它返回未定義。 理想情況下，我想將 doc.id 從我的服務傳遞給我的組件，請幫忙；

服務

docId: any;

    
getLoggedInUser() {
    this.fireAuth.onAuthStateChanged((user) => {
      if (user) {
        console.log(user.email, 'user is valid');

        const db = collection(this.firestore, 'users');
        getDocs(db).then((resp) => {
          this.data = [
            ...resp.docs.map((item) => {
              return { ...item.data(), id: item.id };
            }),
          ];

          //filter users array to get current logged in users data
          this.authUser = this.data.filter((item: any) => {
            this.docId = user.uid;
            return item.email === user.email;
          });
        });
      } else {
        this.router.navigate(['/login']);
        return;
      }
    });
    return this.docId;
  }

零件

  ngOnInit(): void {
    console.log(this.auth.getLoggedInUser());
  }

Answer 1

我建議參與 Promise 和 Observable 的概念。 https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth

你的問題是當你調用getLoggedInUser()是這樣做的：

1.  return this.docId;

2. 調用 this.fireAuth.onAuthStateChanged 返回一個Promise ，等待然后執行其余的響應。

您可以做的是在 SERVICE 中使用可觀察變量並從組件連接到它。

請閱讀以下Firebase：應在 Angular 項目中使用 Promise 還是 Observable？

我希望這有幫助！

Answer 2

在 Angular 中，當您使用服務時，使用變量將數據傳遞給組件並不常見。 為此，您應該使用 observables 或 promises/await/async。

在這種情況下，我建議您使用 observable。 在這里，您有一個如何實現它的示例：

docIdSubject =  new BehaviorSubject<any>(null);
Public get docId(){
  return docIdSubject.asObservable();
} 
    
getLoggedInUser() {
    this.fireAuth.onAuthStateChanged((user) => {
      if (user) {
        console.log(user.email, 'user is valid');

        const db = collection(this.firestore, 'users');
        getDocs(db).then((resp) => {
          this.data = [
            ...resp.docs.map((item) => {
              return { ...item.data(), id: item.id };
            }),
          ];

          //filter users array to get current logged in users data
          this.authUser = this.data.filter((item: any) => {
            //this.docId = user.uid
            return item.email === user.email;
         };

         this.docIdSubject.next(user.uid);

        });
      } else {
        this.router.navigate(['/login']);
        return;
      }
    })
  }

ngOnInit(): void {
    this.auth.docId.subscribe(res =>
      console.log(res);
    );
    this.auth.getLoggedInUser();
  }