## Comment puis-je optimiser les performances de routage Angular 2 en stockant et en supprimant sélectivement les routes ?

Stockage et suppression de routes spécifiques avec RouteReuseStrategy dans Angular 2

Énoncé du problème

Lors de l'implémentation du routage dans une application Angular 2, vous souhaiterez peut-être certaines routes à stocker en mémoire pour un rendu plus rapide lors d'une nouvelle visite. Cependant, pour certains itinéraires, comme une vue détaillée d'une ressource, vous préférerez peut-être les supprimer de la mémoire pour conserver les ressources.

Présentation de la solution

Angular 2 fournit l'interface RouteReuseStrategy pour contrôler le stockage et récupération des itinéraires. En implémentant cette interface et en la fournissant dans votre module Angular, vous pouvez définir un comportement personnalisé pour savoir quand les routes doivent être stockées et quand elles doivent être supprimées.

Implémentation de RouteReuseStrategy

shouldDetach

Dans la méthode ShouldDetach, vous pouvez déterminer si un itinéraire doit être stocké. S'il renvoie vrai, Angular stockera l'itinéraire. En règle générale, vous vérifiez le chemin de la route et décidez de le stocker ou non en fonction d'un ensemble de critères prédéfinis.

store

Si ShouldDetach renvoie true, la méthode store est appelée pour stocker le chemin. itinéraire. Vous pouvez implémenter cette méthode pour stocker ActivatedRouteSnapshot et DetachedRouteHandle, qui seront utilisés ultérieurement pour être réutilisés.

shouldAttach

Dans la méthode ShouldAttach, vous pouvez vérifier si une route doit être réutilisée. S'il renvoie vrai, Angular utilisera la version stockée de l'itinéraire et n'en créera pas une nouvelle. Vous pouvez utiliser ActivatedRouteSnapshot et queryParams pour comparer la route entrante avec les propriétés de la route stockée afin de déterminer si elles correspondent.

retrieve

Si ShouldAttach renvoie true, la méthode de récupération est appelée pour récupérer la version stockée. du parcours. Vous pouvez utiliser le DetachedRouteHandle stocké par magasin pour identifier et renvoyer l'itinéraire correct.

Exemple d'utilisation

Par exemple, considérons une application dans laquelle vous souhaitez stocker la page de résultats de recherche, mais pas l'individu. page de détails de la ressource. Voici comment vous l'implémenteriez :

<code class="typescript">import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes: { [key: string]: RouteStorageObject } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    if (route.routeConfig.path === 'search/:term') {
      return true;
    }
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    if (shouldDetach(route)) {
      this.storedRoutes[route.routeConfig.path] = { snapshot: route, handle };
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    if (this.storedRoutes.hasOwnProperty(route.routeConfig.path)) {
      return true;
    }
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (shouldAttach(route)) {
      return this.storedRoutes[route.routeConfig.path].handle;
    }
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}</code>

Dans l'AppModule :

<code class="typescript">@NgModule({
  [...],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule {}</code>

En fournissant cette stratégie, Angular gérera automatiquement le stockage et la récupération des itinéraires en fonction des règles que vous définissez , permettant des performances optimisées dans votre application.

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!