この記事では主に angular2 のルーティング プリロード戦略を紹介します。編集者はこれが非常に優れていると考えていますので、参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
1. 問題の説明
2. プリロード戦略
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); } }
次に、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});
/** * 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 {}
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);
公式 Web サイトに PreloadAllModules がデフォルトで実装されています。公式 Web サイトの手順を参照してください。
具体的なコードは私の github (https://github.com/332557712/cc) にあります。
関連する推奨事項:
以上がangular2 ルーティングのプリロード例の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。