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

この記事では主に 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['preload'] ? load() : Observable.of(null);
  }

}

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

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

import { NgModule }       from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

import { LoginComponent }   from './login/login.component';
import { MainComponent }  from './main/main.component';



/**
 * app路由
 */
const routes: Routes = [
 { path: '', redirectTo: '/login', pathMatch: 'full' },
 { 
   path: 'login', 
   component: LoginComponent
 },
 { 
   path: 'app', 
   component: MainComponent,
   loadChildren: 'app/main/main.module#MainModule',
   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 '@angular/core';
import { RouterModule, Routes, Router } from '@angular/router';

/**
 * 主体路由
 */
const routes: Routes = [
   { path: 'home', loadChildren: 'app/home/home.module#HomeModule', data: {preload: true} },
   { path: 'demo', loadChildren: 'app/demo/demo.module#DemoModule', 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 サイトの他の関連記事を参照してください。