[角度]は角度でレイジールートのローディングインジケーターを表示します

私たちは、簡単に分割し、遅延ロード角度でルートをコーディングすることができます。しかし、ユーザは、その怠惰なロードされたルートをクリックしたときに、それは実際にはJavaScriptバンドルをフェッチし、実行するためにいくつかの時間を作ります。このレッスンでは私たちは、このような遅延ロードされたルートのためのローディングインジケータを実装することができますどのように表示されます。

<！ - app.component.thml - > 

<ルータアウトレット> 
  <スパンクラス= "ローダー" * ngIf = "読み込み"> </ span>を
</ルータ、アウトレット>

　

インポート{コンポーネント}角度/コア@ 'から。
インポート{ルータ、RouteConfigLoadStart、RouteConfigLoadEnd、RouterEvent}角/ルーター@ 'から。

@Component（{ 
  セレクタ： 'APP-ルート'、
  templateUrl './app.component.html'、
  styleUrls：[」./app.component.css'] 
}）
エクスポートクラスAppComponent { 
  ローディング：ブール。

  コンストラクタ（ルータ：ルータ）{ 
    this.loading = FALSE; 

    router.events.subscribe（ 
      （イベント：RouterEvent）：ボイド=> { 
        もしRouteConfigLoadStartのinstanceof（イベント）{ 
          this.loading = TRUE; 
        RouteConfigLoadEndのinstanceof}もしそうでなければ（イベント）{ 
          this.loading = FALSE;
      } 
    ）; 
  } 
}