Angular 6-一些组件使用仅调用一次的相同随机数据-如何避免“未定义”

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-针对ASYNC数据的UsersService请求（继续执行）2- FirstComponent获取并打印this.usersService.allUsers （由于异步请求而未填充）3- this.usersService.allUsers仍未定义

您需要这样的主题 ：

UsersService

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
}

FirstComponent

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一些东西