バックグラウンドでAPIからデータを読み込む

Question

私は現在、私のUXを改善しようとしています。 ユーザーが新しいコンポーネントに切り替えると、データがロードされてビューに表示されるまで約0.5〜1秒かかります。最初の瞬間は、ビューが空であり、一部の部品が欠落しているか、間違って表示されています。

角度解決インターフェイスがあることを理解しています。しかし、わかっている限り、データが利用可能になるまでビューのレンダリングが遅れるだけです。

私のアプリのランディングページがレンダリングされた後、バックグラウンドでデータをロードできるオプションがあるかどうかは疑問でした。こうすることで、ユーザーはすでにアプリを使用して表示することができ、他のページ/コンポーネントのデータが読み込まれていることを知らずに、バックグラウンドで表示することができます。

おそらくもっと良いアプローチがあるかもしれません。あるいは、解決インターフェイスの理解が間違っているかもしれません。

編集： は私のコードは、現在どのように機能するかを、例を提供する： サービスファイルでは：私のコンポーネントファイルで

getTiers() { 
     return this.http.get(this.authService.getApiEndpoint(), this.authService.getRequestOptions()) 
     .map(
     (response: Response) => { 
      const data = response.json(); 
      return data; 
     } 
    ); 

： ngOnInit（）{ this.getTiersを（）;私のテンプレートファイルで

}

getTiers() { 
    this.tierService.getTiers() 
     .subscribe(
     (tiers) => 
      this.tiers = tiers.data, 
     (error) => console.log(error), 
     () => this.initializingCompleted = true 
    ); 
    } 

：データの

<div class="col-md-4" *ngFor="let tier of tiers"> 
     <ul class="table"> 
      <li class="title"> 
      {{ tier.title }} 
      </li> 
[...] 

Answer 1

この記事を見てみましょう。

コンポーネントから次に

public data$: BehaviorSubject<any> = new BehaviorSubject(null); 

constructor(private http: Http){ 
    this.http.get(...).map(...).subscribe(res => this.data$.next(res)) 
} 

：

public data: any; 

constructor(private myService: MyService){ 
    this.data = this.myService.data$.value; 
    this.myService.data$.subscribe(res => this.data = res); 
} 

NB：あなたが行動の対象data$.next(null)

Answer 2

非同期読み込みは、角度を使用する利点の一つです。単一ページのアプリケーションであるため、ランディングページのロード時に、非同期メソッドを適切に使用すると、この問題の解決に役立ちます。データをロードし、rxjs BehaviorSubjectに保存するすべてのアプリ上で利用可能なサービスを使用しhttps://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

幸運