当我在 Angular 的其他组件中使用服务类函数时，它返回未定义

Question

我正在使用 Angular 8。

我在服务类中创建了一个名为getUserInfo() 的函数，该函数返回有关使用云服务 Firestore 的用户的信息。

问题是，当我在服务类中显示结果时，它已定义并且可以完美运行，但在组件内部，结果是未定义的。

我想我知道错误是什么：当我在组件内部调用函数时，它返回undefined，因为该函数需要一些时间从数据库中检索数据，但我不知道如何解决它还是改用什么？

RxJS 修复了吗？

我已经尝试过路由器解析器，但也没有用。

这是我在服务类中使用的函数

getUserInfo() {
    this.db.collection('users').doc(`${this.cookie.get("id")}`).ref.get().then(doc => {
    return doc.data()
})}

以下是我要使用服务类功能的组件：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth/auth.service';

@Component({
    selector: 'app-super-admin',
    templateUrl: './super-admin.component.html',
    styleUrls: ['./super-admin.component.css']
})
export class SuperAdminComponent implements OnInit {
    user;
    constructor(private authService: AuthService) { }

    ngOnInit() {
        this.user = this.authService.getUserInfo();
    }
}

Answer 1

我在 thisstackblitz 中重新创建了您的场景，这工作很好

util.service.ts

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

@Injectable()
export class UtilService {

  constructor() { }

  getUserInfo() {
    return new Promise((res,rej) => {
      this.getDelayedData((data) => {
        res(data)
      });
    });
  }

  getDelayedData(call){
   setTimeout(()=> {
     call('here your data');
    }, 1500)
  }
}

app.component.ts

import { Component } from '@angular/core';
import { UtilService } from './util.service';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  constructor(public util: UtilService) {
    this.util.getUserInfo().then((data : string) => {
      this.name = data;
      console.log(data)
    })
  }
}

Answer 2

更好的方法是使用 Rxjs，因为它通常与 angular 一起使用，所以我肯定会推荐它。但是，如果您正在寻找没有它的解决方案，您可以随时使用 Promises。
所以你面临的问题是在从服务器接收到数据之前代码正在执行。您可以通过在服务内承诺对 firestore 的调用并返回 Promise 来解决此问题，然后您可以在组件内调用 Promise。
于是代码变成了： 服务类

getUserInfo() {
let promise =  new Promise( (resolve,reject) => {
    this.db.collection('users').doc(`${this.cookie.get("id")}`).ref.get().then(doc => {
      resolve(doc.data());
    }).catch(er => {
      reject(er);
    })
}
return promise;
);

那么在组件的ts文件中你可以这样做：

   ngOnInit() {
        this.authService.getUserInfo().then(data => {
          this.user = data;
        });
    }

希望这会有所帮助！

Answer 3

简短的回答是：是的，RxJS 正在解决你的问题。

正如您所怀疑的，来自服务器的响应需要一些时间才能将某些内容返回给您的应用程序。

您的组件需要订阅此异步应答，并且仅在收到响应时执行所需的操作。

因此，您需要摆脱服务中的 Promise，只需将调用返回给 Firebase 的东西

getUserInfo() {
    return this.db.collection('users').doc(`${this.cookie.get("id")}`).ref.get();
}

在您的组件中，您需要执行以下操作：

ngOnInit() {
    this.authService.getUserInfo().subscribe(response => {
        /* Use `response` as the answer from the server and do whatever you need to do */
        console.log(response); // Use this to inspect the response from the server
    });
}

Answer 4

this.user = this.authService.getUserInfo();

是的，你是对的。此时，authService.getUserInfo() 尚未解决。（另外，您的 getUserInfo() 方法中没有 return 语句）。

我可以想出两种方法来解决这个问题。

this.authService.getUserInfo().then(u => this.user = u);

RxJS 方式：

getUserInfo() {
 return from(this.db.collection('users').doc(`${this.cookie.get("id")}`).ref.get());
}

/* ... */

this.authService.getUserInfo()
 .subscribe(u => this.user = u);

Here 更多地介绍了如何将 Promise 转换为 observable。