Comment implémenter une RouteReuseStrategy personnalisée pour détacher des routes spécifiques dans Angular ?

Implémentation de ShouldDetach de RouteReuseStrategy pour des routes spécifiques dans Angular 2

Contexte

RouteReuseStrategy vous permet de demander à Angular de conserver un composant au lieu de le détruire lors de la navigation , optimisant les performances et préservant l'état du composant.

Énoncé du problème

Vous souhaitez stocker l'état pour les routes comme "/documents" mais pas pour les routes spécifiques comme "/documents/:id."

Solution

Implémentez une RouteReuseStrategy personnalisée en étendant la RouteReuseStrategy intégrée et en remplaçant les méthodes appropriées :

importer depuis le routeur d'Angular

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

Créer une classe implémentant RouteReuseStrategy

<code class="typescript">export class CustomRouteReuseStrategy implements RouteReuseStrategy {</code>

Remplacer 'shouldDetach' pour le stockage sélectif d'itinéraire

<code class="typescript">shouldDetach(route: ActivatedRouteSnapshot): boolean {
  return route.routeConfig?.path === '/documents/id';
}</code>

Fournir la stratégie personnalisée dans le NgModule

<code class="typescript">providers: [
  { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy },
]</code>

Explication

• shouldDetach : Contrôle le stockage de l'itinéraire. Renvoie true pour les itinéraires que vous souhaitez stocker. Dans ce scénario, stockez uniquement la route "/documents".
• shouldAttach: Détermine quand réutiliser une route stockée. Si cette méthode renvoie vrai, Angular réutilisera le composant au lieu de le recréer. Nous ne remplaçons pas cette méthode dans notre exemple.

Remarques supplémentaires :

• Cette implémentation stocke une instance de chaque itinéraire qualifié dans l'ensemble du parcours de l'utilisateur. session.
• Vous pouvez personnaliser davantage en modifiant ShouldDetach pour contrôler les itinéraires à stocker en fonction de vos besoins.

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!