## Wie kann ich die Angular 2-Routing-Leistung durch selektives Speichern und Verwerfen von Routen optimieren?

Speichern und Verwerfen bestimmter Routen mit RouteReuseStrategy in Angular 2

Problemstellung

Bei der Implementierung von Routing in einer Angular 2-Anwendung möchten Sie möglicherweise bestimmte Routen im Speicher gespeichert werden, um beim erneuten Aufrufen ein schnelleres Rendern zu ermöglichen. B. eine detaillierte Ansicht einer Ressource, möchten Sie diese möglicherweise lieber aus dem Speicher verwerfen, um Ressourcen zu sparen.

Lösungsübersicht

Angular 2 bietet die RouteReuseStrategy-Schnittstelle zur Steuerung der Speichern und Abrufen von Routen. Indem Sie diese Schnittstelle implementieren und in Ihrem Angular-Modul bereitstellen, können Sie benutzerdefiniertes Verhalten dafür definieren, wann Routen gespeichert und wann sie verworfen werden sollen.

Implementierung von RouteReuseStrategy

shouldDetach

In der Methode ShouldDetach können Sie festlegen, ob eine Route gespeichert werden soll. Wenn es „true“ zurückgibt, speichert Angular die Route. Normalerweise überprüfen Sie den Routenpfad und entscheiden anhand einer Reihe vordefinierter Kriterien, ob er gespeichert werden soll oder nicht.

store

Wenn ShouldDetach „true“ zurückgibt, wird die Store-Methode aufgerufen, um den zu speichern Route. Sie können diese Methode implementieren, um den ActivatedRouteSnapshot und den DetachedRouteHandle zu speichern, die später zur Wiederverwendung verwendet werden.

shouldAttach

In der ShouldAttach-Methode können Sie prüfen, ob eine Route wiederverwendet werden soll. Wenn es „true“ zurückgibt, verwendet Angular die gespeicherte Version der Route und erstellt keine neue. Sie können ActivatedRouteSnapshot und queryParams verwenden, um die eingehende Route mit den Eigenschaften der gespeicherten Route zu vergleichen, um festzustellen, ob sie übereinstimmen.

retrieve

Wenn ShouldAttach „true“ zurückgibt, wird die Abrufmethode aufgerufen, um die gespeicherte Version abzurufen der Strecke. Sie können das vom Store gespeicherte DetachedRouteHandle verwenden, um die richtige Route zu identifizieren und zurückzugeben.

Beispielverwendung

Stellen Sie sich zum Beispiel eine Anwendung vor, in der Sie die Suchergebnisseite, aber nicht die einzelne Person speichern möchten Ressourcendetailseite. So würden Sie es implementieren:

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

Im AppModule:

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

Durch die Bereitstellung dieser Strategie verwaltet Angular automatisch die Speicherung und den Abruf von Routen basierend auf den von Ihnen definierten Regeln , was eine optimierte Leistung Ihrer Anwendung ermöglicht.

Das obige ist der detaillierte Inhalt von## Wie kann ich die Angular 2-Routing-Leistung durch selektives Speichern und Verwerfen von Routen optimieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!