データがAngular2に読み込まれる前のページを表示

Question

Angular2テンプレートが表示するためにデータに依存し、そのデータがまだ読み込まれていない場合、アプリケーション全体が中断し、ユーザーはページを再読み込みする必要があります。

Angular2リゾルバはこの問題の解決方法です。リゾルバーは、約束や観察可能な解決が得られるまで、ページの読み込みを防ぎます。しかし問題は、リゾルバが解決するまでページがレンダリングされないことです。

たとえば、スピナーの後ろにページが表示され、使用可能になった後にデータが表示されるようにしたい場合はどうなりますか？レゾルバを使用するAngular2でこれを行う方法はありますか、使用できない場合にデータが使用されないようにするためにテンプレートにロジックを持たせて、独自のサービス呼び出しをコンポーネントに実装する唯一の方法ですか？たとえば、テンプレート内の{{ foo.bar }}はすべて{{ foo && foo.bar }}に変更する必要があります。

これを行うには、角度2のアプローチがありますか？

{{foo && foo.bar}} 

はちょうどあなたがネストされたプロパティを解決したい場合に便利です疑問符演算子を、用途等

Answer 1

想定、あなたのコンポーネント内にデータを解決するには、二重チェックする必要はありません。各1は、未定義される可能性があります。

{{foo?.bar?.another?.property}} 

しかし、あなたはすぐにあなたのHTMLに?のトンを使用して自分自身を見つけるかもしれません。そのため、まだ解決されていないデータの場合、?を使用するのはちょっと醜いかもしれません。

別の解決策は、一方で、この

<div *ngIf="loading">Page is loading</div> 
<div *ngIf="!loading"> {{foo.bar}} </div> 

ようngIfですべてをラップする複数のコンポーネントを持っている場合、あなたは多くのスピナーアイコン、読み込み中...メッセージ広がりを持っているかもしれないですあなたのページ全体にまたは、特定のコンテンツ領域の最上位コンポーネントにngIfを置きます。私は、あなたのユースケースとあなたの個人的なUXの好みによって異なります。

Answer 2

リゾルバは、約束または可決されるまでページが読み込まれないようにします。しかし問題は、リゾルバが解決するまでページがレンダリングされないことです。

具体的には、解決策がのルートがアクティブ化されないようにします。。しかし、ページ/ UIのいくつかの部分は、ルータがビューの100％を制御することができないので、まだ読み込まれている（そしておそらくレンダリングされている）。

少なくとも、という名前のルートコンポーネントがありますが、これは<router-outlet></router-outlet>です。

AppComponentのテンプレート内にスピナーのマークアップを入れ、サービスを使用して開始/停止することができます。

次に、Resolveにこのサービスを挿入して、スピナーと非同期操作を調整します。具体的には、resolve()メソッド内では次のようになります。

• スピナーを起動します。
• onCompleteとonErrorイベントに「停止スピナー」コールバックを追加します（あなたは観測可能なものを使用していると仮定します）。
• 非同期操作（例えば、HTTP呼び出し）のために観測可能なものを返します。

スピナーの表示方法は、使用するCSSフレームワークによって異なります。これは、画面の一隅にフルスクリーン（モーダルのようなもの）または小さな通知を暗くするオーバーレイである可能性があります。

さらなる改善：HTTPコールが進行中の場合はいつでも、スピンナーを開始および停止できるように、Httpサービスをスパイしないでください（またはカスタムの集中サービスを使用してすべてのHTTPコールをラップするのはなぜですか？動作...）。こうすることで、解決策のそれぞれでスピナーの手動開始と停止を処理する必要はありません。