Comment utiliser le module de délai de préchargement angulaire

Cette fois, je vais vous montrer comment utiliser le module de délai de précharge angulaire, et quelles sont les précautions lors de l'utilisation du module de délai de précharge angulaire. Voici un cas pratique, jetons un oeil.

En utilisant le chargement paresseux de route, nous avons présenté comment utiliser les modules pour diviser les applications. Lors de l'accès à ce module, Angular charge ce module. Mais cela prend un peu de temps. Il y aura un léger délai lorsque l'utilisateur cliquera pour la première fois.

Nous pouvons résoudre ce problème en préchargeant les itinéraires. Les routeurs peuvent charger de manière asynchrone des modules différés pendant que l'utilisateur interagit avec autres parties. Cela donne aux utilisateurs un accès plus rapide aux modules retardés.

Cet article ajoutera la fonction de préchargement basée sur l'exemple précédent.

Dans la section précédente, notre définition de routage racine se trouvait dans main.routing.ts et nous avons utilisé la définition de routage racine dans app.module.ts.

A noter que le composant Home est chargé à l'avance. Nous rendrons ce composant après le démarrage du système.

Une fois qu'Angular a rendu le composant Home, l'utilisateur peut interagir avec l'application et nous pouvons précharger d'autres modules en arrière-plan grâce à une configuration simple.

Activer le préchargement

Nous fournissons une stratégie préchargée dans la fonction forRoot.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { PreloadAllModules } from '@angular/router';
@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Cette stratégie PreloadAllModules provient de @angular/router, nous devons donc également l'importer.

Stratégie de préchargement personnalisée

Il existe deux stratégies prédéfinies dans le package du routeur :

1. Pas de préchargement NoPreloading

2. Précharger tous les modules PreloadAllModules

Charger le module après 5 secondes

Cependant, vous pouvez définir vous-même une stratégie personnalisée. C'est plus simple que vous ne le pensez. Par exemple, vous souhaitez charger les modules restants 5 secondes après l'initialisation de votre application.

Vous devez implémenter l'interface PreloadingStrategy et nous définissons une classe de stratégie personnalisée de CustomPreloadingStrategy.

import { Route } from '@angular/router';
import { PreloadingStrategy } from '@angular/router';
import { Observable } from 'rxjs/Rx';
export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
    return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
  }
}

Ensuite, modifiez app.module.ts pour utiliser cette stratégie personnalisée. Notez que vous devez également ajouter cette classe dans les propriétés. Pour réaliser une injection de dépendances.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { CustomPreloadingStrategy } from './preload';
@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })
 ],
 providers: [CustomPreloadingStrategy ],
 bootstrap: [AppComponent]
})
export class AppModule { }

Vous verrez qu'au bout de 5 secondes, ce module fonction est chargé automatiquement.

Charger le module spécifié

Nous pouvons également définir des paramètres supplémentaires dans la route pour spécifier les modules à précharger. Nous utilisons les données dans la définition de la route pour fournir ces données supplémentaires.

import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';
export const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: 'shop', loadChildren: './shop/shop.module#ShopModule', data: {preload: true} },
  { path: '**', component: HomeComponent }
];

Ensuite, nous définissons une nouvelle stratégie de chargement.

import { Observable } from 'rxjs/Rx';
import { PreloadingStrategy, Route } from '@angular/router';
export class PreloadSelectedModules implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data.preload ? load() : Observable.of(null);
  }
}

Enfin, utilisez cette stratégie dans app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { PreloadSelectedModules } from './preload.module';
@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadSelectedModules })
 ],
 providers: [PreloadSelectedModules ],
 bootstrap: [AppComponent]
})
export class AppModule { }

A ce stade, vous pouvez voir que le module est préchargé directement. Même si vous cliquez sur le lien, aucune nouvelle demande ne sera effectuée.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

JS implémente une simple horloge de 24 heures

Sélection du formulaire d'opération ReactJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!