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