Angular 6 - 一些组件使用仅调用一次的相同随机数据 - 如何避免 'undefined'

Question

我试图在多个组件的 ngOnInit 中使用相同的数据，问题是，每次订阅时数据都是随机的。我只能在整个运行应用程序中订阅一次。这意味着，如果我订阅两次，它不会有任何用处，因为每个组件都会有其他东西。

我想订阅一次服务并创建一个全局变量。但是当您尝试在所有组件中使用该全局变量时（在 ngOnInit 上），它始终是未定义的。

如何让组件等待在应用程序中只能调用一次的同一事件？

export class UsersService {

  public allUsers: Array<Object> = []
  public allUsersUrl: string = 'https://glacial-escarpment-40412.herokuapp.com/users/'

  constructor(private http: HttpClient) { 
    this.getAllUsers().subscribe(data => {
        this.allUsers = data;
        console.log(this.allUsers)
    })
  }

    getAllUsers(): Observable<any> {
        return this.http.get<any>(this.allUsersUrl);
    }

    getUser(id: number): Observable<any> {
        return this.http.get<any>(this.allUsersUrl + id);
    }
}

我的组件：

export class FirstComponent {

  constructor(private usersService: UsersService){}

    ngOnInit() {
        console.log(this.usersService.allUsers) //undefined
    }

export class SecondComponent {

  constructor(private usersService: UsersService){}

    ngOnInit() {
        console.log(this.usersService.allUsers) //undefined
    }

请帮帮我:)

Answer 1

您遇到同步问题。这是你的场景

1- 创建 first component 1.1 - 注入 UsersService 1.2 - UsersService 请求异步数据（执行继续） 2- FirstComponent 获取并打印 this.usersService.allUsers（由于异步请求，仍未填充） 3- this.usersService.allUsers 仍未定义

你需要Subject 像这样：

用户服务

export class UsersService {

  private _allUsersSource = new Subject<Array<Object>>();
  private _allUsers$ = this._allUsersSource.asObservable();

  public allUsersUrl: string = 'https://glacial-escarpment-40412.herokuapp.com/users/'

  constructor(private http: HttpClient) { 
    this.getAllUsers();
  }

    getAllUsers(): Observable<any> {
        return this.http.get<any>(this.allUsersUrl).subscribe(
              data => this._allUsersSource.next(data)
              );
    }

    get allUsers$(): Observable<Array<Object>> {
        return this._allUsers$;
    }

    // OTHERS
}

第一个组件

export class FirstComponent {

  subscription: Subscription;
  allUsers: Array<Object>;

  constructor(private usersService: UsersService){}

    ngOnInit() {
        this.subscription = this.usersService.allUsers$.subscribe(users => {
                                  this.allUsers = users;
                                  console.log(this.allUsers);
                            });


    }

SecondComponent

的一些东西

Angular 6 - 一些组件使用仅调用一次的相同随机数据 - 如何避免 'undefined'

Angular 6 - a few components using the same randomised data that's called only once - how to avoid 'undefined'

global-variables

angular-services

angular6