angular2 ルーティングのプリロード例の詳細な説明

小云云
リリース: 2018-01-27 14:21:00
オリジナル
1292 人が閲覧しました

この記事では主に angular2 のルーティング プリロード戦略を紹介します。編集者はこれが非常に優れていると考えていますので、参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. 問題の説明

ルートが遅延ロードされていない場合、初めて使用するときのロードが非常に遅くなり、Angular2 では遅延ロードに loadChildren を使用できます。初めて使用する場合は必要なモジュールのみがロードされ、その他のモジュールは実際に使用するときにロードされます。このとき、ブラウザのコンソールを開いて js のロードを確認すると、対応する js が表示されます。使用するとロードされるため、対応する js の最初のクリックが発生します。モジュールの機能はしばらく遅れますが、後で使用するときに停止することはありません。この問題を解決するためにプリロード戦略を使用する方法を説明します。

2. プリロード戦略

RouterModule.forRoot の 2 番目の構成オプションは、もちろん、ここでは preloadingStrategy 構成についてのみ説明します。プリロード戦略の構成です。プリロードを必要としない一部のシナリオでは、それを構成する必要はありません。まず、selective-preloading-strategy.ts の新しいファイルを作成します。 PreloadingStrategy を実装するクラスを使用します。コードは次のとおりです。


import { PreloadingStrategy, Route } from "@angular/router";
import { Observable } from "rxjs";
/**
 * 预加载策略
 */
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    //当路由中配置data: {preload: true}时预加载
    return route.data && route.data && route.data[&#39;preload&#39;] ? load() : Observable.of(null);
  }

}
ログイン後にコピー

上記の意味は、ルートに data: {preload: true} パラメータを設定するときの意味です。ここでの Strategy は、load() を返します。つまり、設定がない場合は、プリロードされません。デフォルトでは、プリロードされません。私の github にあるものと同様に、設定をプリロードする必要はありません。柔軟に使用できます。


次に、RouterModule.forRoot の設定であるルートに戦略を追加します。コードは次のとおりです。

import { NgModule }       from &#39;@angular/core&#39;;
import { RouterModule, Routes } from &#39;@angular/router&#39;;

import {SelectivePreloadingStrategy} from "./selective-preloading-strategy";

import { LoginComponent }   from &#39;./login/login.component&#39;;
import { MainComponent }  from &#39;./main/main.component&#39;;



/**
 * app路由
 */
const routes: Routes = [
 { path: &#39;&#39;, redirectTo: &#39;/login&#39;, pathMatch: &#39;full&#39; },
 { 
   path: &#39;login&#39;, 
   component: LoginComponent
 },
 { 
   path: &#39;app&#39;, 
   component: MainComponent,
   loadChildren: &#39;app/main/main.module#MainModule&#39;,
   data: {preload: true}
 }
];

export const appRoutes=RouterModule.forRoot(routes,{preloadingStrategy: SelectivePreloadingStrategy});
ログイン後にコピー

これを AppModule のプロバイダーにも追加する必要があります。コードは次のとおりです。 :

/**
 * app模块
 */
@NgModule({
 imports: [
  appRoutes,
  BrowserModule,
  BrowserAnimationsModule,
  NgbModule.forRoot(),
  MainModule,
  LoginModule
 ],
 declarations: [
  AppComponent,
  ToastBoxComponent,
  ToastComponent,
  SpinComponent
 ],
 providers: [AppService,ToastService,HttpService,SpinService,SelectivePreloadingStrategy],
 exports:[ToastBoxComponent,SpinComponent],
 bootstrap: [ AppComponent ]
})
export class AppModule {}
ログイン後にコピー

Next ルーティングで使用されるコードは次のとおりです:

import { NgModule, OnInit } from &#39;@angular/core&#39;;
import { RouterModule, Routes, Router } from &#39;@angular/router&#39;;

/**
 * 主体路由
 */
const routes: Routes = [
   { path: &#39;home&#39;, loadChildren: &#39;app/home/home.module#HomeModule&#39;, data: {preload: true} },
   { path: &#39;demo&#39;, loadChildren: &#39;app/demo/demo.module#DemoModule&#39;, data: {preload: true} },
];

export const mainRoutes = RouterModule.forChild(routes);
ログイン後にコピー

ブラウザ F12 を開いて、JS の読み込みを確認します。ページが読み込まれると、他のモジュールの JS が読み込まれることがわかります。プリロードされます

公式 Web サイトに PreloadAllModules がデフォルトで実装されています。公式 Web サイトの手順を参照してください。

具体的なコードは私の github (https://github.com/332557712/cc) にあります。

関連する推奨事項:


JS プリロードビデオオーディオ/ビデオスクリーンショット共有のヒント

プリロード遅延モジュールの Angular 実装例の共有

JS 画像プリロード例

以上がangular2 ルーティングのプリロード例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!