Угловой: данные не могут перезагрузиться после обновления страницы браузера - PullRequest
Новая
       15

Угловой: данные не могут перезагрузиться после обновления страницы браузера

0 голосов
/ 17 октября 2019

Я пытаюсь загрузить локальный JSON в компонент

Мой код, как показано ниже:

service.ts 

export class GameService {
  constructor(private httpClient: HttpClient) {}

  loadGameInfo(): Observable<Game> {
    return this.httpClient.get<Game>('/assets/mock/game_info.json');
  }
}

store.ts 

export class GameStore {
  private gameSubject = new BehaviorSubject(new Game());

  public game: Observable<Game> = this.gameSubject.asObservable();

  private isInitialized = false;

  constructor(private gameService: GameService) {}

  public loadIfEmpty(): void {
    if (!this.isInitialized) {
      this.isInitialized = true;
      this.load();
    }
  }

  public load(): void {
    this.gameService
      .loadGameInfo()
      .pipe(
        tap((game: Game) => {
          this.gameSubject.next(game);
        })
      )
      .subscribe();
  }

  public getGame(): Game {
    return this.gameSubject.getValue();
  }
}

component.ts 

export class GameInfoComponent implements OnInit {

    constructor(
    private gameStore: GameStore) {}
  ngOnInit() {
    this.gameStore.loadIfEmpty();
    console.log('info: ' + JSON.stringify(this.gameStore.getGame()));
  }
}

Проблема:

Если я обновляю страницу браузера, gameStore не загружает данные, я получаю журнал, как показано ниже:

информация: {}

Любое предложение приветствуется

1 Ответ

2 голосов
/ 17 октября 2019

Все, что вы делаете, выполняется асинхронно. Но вы вызываете getValue () синхронно. Таким образом, данные могут отсутствовать во время звонка, но могут поступить после этого времени. Поэтому вы должны вызвать getValue () в методе подписки. Поскольку вы вводите store.ts в свой компонент, вы можете легко получить доступ к наблюдаемой игре. 

this.gameStore.game.subscribe(data => console.log('info: ' + JSON.stringify(data));
...