angular - Angular 8：服务中的属性返回未定义

Question

我在 Angular 中有一个用户界面，

export interface User {
    id: number;
    firstName: string;
    lastName: string;
}

我有一个用户服务，

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { User } from './model/user';

export class UserService {
    static instance: UserService;
    user: User;

    constructor(private httpClient: HttpClient) { 
       if(!UserService.instance) {
          UserService.instance = this;
       }

       return UserService.instance;
    }

    getUserData() {
       return this.httpClient.get(URL);
    }

    setUserData(data) {
       this.user = data;
    }

    getUser() {
       return this.user;
    }
}

我将服务维护为单例，因为我希望对登录的用户数据具有单一访问权限并在应用程序的不同区域之间共享状态。

在 user.component.ts

export class UserComponent implements OnInit {

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUserData(url).subscribe((response: any) => {
        this.userService.setUserData(response);
    });
  }

  getUser() {
     console.log(this.userService.getUser()) //prints undefined.
  }

}

调试时，UserService 中的用户未定义。我错过了一些东西，我无法弄清楚。你们能帮忙吗。

Answer 1

将此装饰器添加到您的服务中，以便以 Angular 方式使其成为单例：

@Injectable({providedIn: 'root'})
export class UserService {
...
}

之后，无论注入何处，您都将获得相同的服务实例。

Answer 2

UserService 类中的属性 user 定义为 User 类型，但未初始化。因此，我们得到未定义的错误。您可以按如下方式对其进行初始化，

user:User = <User>{};