дождитесь завершения запроса в угловом формате - PullRequest
Новая
       5

дождитесь завершения запроса в угловом формате

0 голосов
/ 30 августа 2018

В моем угловом приложении у меня есть один родительский компонент, то есть компонент Dashboard, имеющий 2 подкомпонента, то есть компонент Analytics и компонент Stats. Мой dashboard.component.html выглядит так 

<div class="row">
  <div class="col-lg-6"><app-analytics></app-analytics></div>
  <div class="col-lg-6"><app-stats></app-stats></div>
</div>

Я также использую глобальный компонент, который доступен для всех компонентов, работает как глобальное хранилище. Сейчас в dashboard.component.ts. Я делаю HTTP-вызов на сервер, получаю данные и сохраняю их в глобальном компоненте.

dashboard.component.ts 

import { Component, OnInit } from '@angular/core';
import { Global } from 'app/shared/global';
import { Http } from '@angular/http';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

 constructor(private http : Http){
 };

 ngOnInit(){
  this.http.get('/api/getUserPreferences').subscribe(response=>{
   var data = response.json();
   Global.userPreferences = data.preferences;
  })
}

Пользовательские настройки, которые я использую в подкомпонентах, то есть в компоненте Analytics и компоненте Stats.

analytics.component.ts 

import { Component, OnInit } from '@angular/core';
import { Global } from 'app/shared/global';
import { Http } from '@angular/http';

@Component({
  selector: 'app-analytics',
  templateUrl: './analytics.component.html',
  styleUrls: ['./analytics.component.css']
})
export class AnalyticsComponent implements OnInit {

 public analyticsUserPreferences : any;

 constructor(private http : Http){
 };

 ngOnInit(){
   this.analyticsUserPreferences  = Global.userPreferences.analytics;
   // Printing just for the question purpose
   console.log(this.analyticsUserPreferences);
 }
}

stats.component.ts 

import { Component, OnInit } from '@angular/core';
import { Global } from 'app/shared/global';
import { Http } from '@angular/http';

@Component({
  selector: 'app-stats',
  templateUrl: './stats.component.html',
  styleUrls: ['./stats.component.css']
})
export class StatsComponent implements OnInit {

 public statsUserPreferences : any;

 constructor(private http : Http){
 };

 ngOnInit(){
   this.statsUserPreferences  = Global.userPreferences.stats;
   // Printing just for the question purpose
   console.log(this.statsUserPreferences);
 }
}

Теперь в этих подкомпонентах. Я получаю undefined каждый раз в консоли. Есть ли способ подождать, пока Global.userPreferences не содержит значений. Или есть другой способ сделать то же самое. Я просто хочу, чтобы он дождался завершения http-запроса и печатал всякий раз, когда значения хранятся внутри Global.userPreferences.

1 Ответ

0 голосов
/ 30 августа 2018

Вы можете использовать асинхронный канал и * ngIf, чтобы дождаться завершения http-запроса перед рендерингом дочерних компонентов. Затем используйте привязку, чтобы передать данные дочернему компоненту и получить их с помощью @Input ().

dashboard.component.ts 

public userPreferences$: Observable<any>;

ngOnInit(){
  this.userPreferences$ = this.http.get('/api/getUserPreferences').subscribe();
  })

dashboard.html 

<app-analytics *ngIf="userPreferences$ | async as userPreferences" [userPreferences]="userPreferences"></app-analytics>
...