Comment empêcher le stockage d'itinéraires spécifiques à l'aide de la méthode ShouldDetach de RouteReuseStrategy dans Angular 2 ?

Comment implémenter ShouldDetach de RouteReuseStrategy pour des routes spécifiques dans Angular 2

Le routage est une partie essentielle de toute application monopage, et les capacités de routage d'Angular 2 sont assez puissantes. L'une des fonctionnalités les plus utiles du routeur d'Angular 2 est la possibilité de stocker l'état d'un itinéraire afin de pouvoir le réutiliser ultérieurement. Cela se fait en implémentant l'interface RouteReuseStrategy.

L'interface RouteReuseStrategy dispose d'un certain nombre de méthodes qui peuvent être implémentées pour personnaliser la façon dont les itinéraires sont stockés et réutilisés. L'une des méthodes les plus importantes est ShouldDetach, qui est utilisée pour déterminer si un itinéraire doit être stocké ou non lorsque l'utilisateur s'en éloigne.

Par défaut, Angular 2 stockera l'état de tous les itinéraires qui sont vers lequel vous avez navigué. Cependant, il peut arriver que vous souhaitiez empêcher le stockage de certains itinéraires. Par exemple, vous ne souhaiterez peut-être pas stocker l'état d'un itinéraire qui affiche une boîte de dialogue modale ou un écran de chargement.

Pour empêcher le stockage d'un itinéraire, vous pouvez implémenter la méthode ShouldDetach et renvoyer false. Cela indiquera à Angular 2 de ne pas stocker l'état de l'itinéraire lorsque l'utilisateur s'en éloigne.

Voici un exemple de la façon d'implémenter la méthode ShouldDetach :

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

@Injectable()
export class CustomRouteReuseStrategy implements RouteReuseStrategy {

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // Return `false` to prevent this route from being stored.
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return null;
  }

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

Pour utiliser cette stratégie de réutilisation d'itinéraire personnalisée, vous pouvez la fournir dans votre NgModule comme ceci :

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

import { AppComponent } from './app.component';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: '', component: AppComponent }
    ], { useHash: true })
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}</code>

Maintenant, la méthode ShouldDetach de votre stratégie de réutilisation d'itinéraire personnalisée sera appelée chaque fois que l'utilisateur s'éloigne d'un itinéraire. Vous pouvez utiliser cette méthode pour déterminer si l'itinéraire doit être stocké ou non.

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!