Angular implémente le partage d'exemples de module de retard de préchargement-tutoriel mysql-php.cn

Angular implémente le partage d'exemples de module de retard de préchargement

小云云

Libérer： 2018-01-24 14:07:46

original

1705 Les gens l'ont consulté

Cet article présente principalement l'exemple d'implémentation d'un module de retard préchargé dans Angular. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

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 des modules différés de manière asynchrone pendant que l'utilisateur interagit avec d'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 route racine a été définie dans main.routing.ts, et nous avons utilisé la définition de route racine dans app.module.ts.

Il est à noter que le composant Home est chargé en 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. 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 de préchargement dans la fonction forRoot.

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;
import { PreloadAllModules } from &#39;@angular/router&#39;;

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Copier après la connexion

Cette stratégie PreloadAllModules vient 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 :

Aucun préchargement
Précharger tous les modules PreloadAllModules

Charger les modules après 5 secondes

Cependant, vous pouvez la 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. Nous définissons une classe de stratégie personnalisée de CustomPreloadingStrategy.

import { Route } from &#39;@angular/router&#39;;
import { PreloadingStrategy } from &#39;@angular/router&#39;;
import { Observable } from &#39;rxjs/Rx&#39;;

export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
    return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
  }
}

Copier après la connexion

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 implémenter l’injection de dépendances.

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;
import { CustomPreloadingStrategy } from &#39;./preload&#39;;

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })
 ],
 providers: [CustomPreloadingStrategy ],
 bootstrap: [AppComponent]
})
export class AppModule { }

Copier après la connexion

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

Charger le module spécifié

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

import { Routes } from &#39;@angular/router&#39;;
// HomeComponent this components will be eager loaded
import { HomeComponent } from &#39;./home/home.component&#39;;

export const routes: Routes = [
  { path: &#39;&#39;, component: HomeComponent, pathMatch: &#39;full&#39; },
  { path: &#39;shop&#39;, loadChildren: &#39;./shop/shop.module#ShopModule&#39;, data: {preload: true} },
  { path: &#39;**&#39;, component: HomeComponent }
];

Copier après la connexion

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

import { Observable } from &#39;rxjs/Rx&#39;;
import { PreloadingStrategy, Route } from &#39;@angular/router&#39;;

export class PreloadSelectedModules implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    return route.data && route.data.preload ? load() : Observable.of(null);
  }
}

Copier après la connexion

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

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgModule } from &#39;@angular/core&#39;;

import { AppComponent } from &#39;./app.component&#39;;
import { HomeComponent } from &#39;./home/home.component&#39;;
import { routes } from &#39;./main.routing&#39;;
import { RouterModule } from &#39;@angular/router&#39;;
import { PreloadSelectedModules } from &#39;./preload.module&#39;;

@NgModule({
 declarations: [
  AppComponent,
  HomeComponent
 ],
 imports: [
  BrowserModule,
  RouterModule.forRoot(routes, { preloadingStrategy: PreloadSelectedModules })
 ],
 providers: [PreloadSelectedModules ],
 bootstrap: [AppComponent]
})
export class AppModule { }

Copier après la connexion

À 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.