Angular 6 - несколько компонентов, использующих одни и те же рандомизированные данные, которые вызываются только один раз - как избежать «неопределенных» - PullRequest
Новая
       14

Angular 6 - несколько компонентов, использующих одни и те же рандомизированные данные, которые вызываются только один раз - как избежать «неопределенных»

0 голосов
/ 12 октября 2018

Я пытаюсь использовать одни и те же данные в 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
    }

Пожалуйста, помогите мне:)

1 Ответ

0 голосов
/ 12 октября 2018

У вас проблема с синхронизмом.Это ваш сценарий

1 - создание first component 1.1 - внедрение UsersService 1.2 - UsersService запроса данных ASYNC (выполнение продолжается) 2- FirstComponent get и печать 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

...