Implementierungsstrategie für die Wiederverwendung von Winkelrouten

Dieser Artikel führt hauptsächlich eine kurze Diskussion der Strategie zur Wiederverwendung von Angular-Routen ein. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Einführung

Das Routing erfolgt während der Ausführung zustandslos, das heißt, der Komponentenstatus wird in den meisten Fällen natürlich auch gelöscht ist angesichts des Szenarios vernünftig.

Aber manchmal können bestimmte Bedürfnisse dazu führen, dass Menschen in einen halbtoten Zustand geraten. Natürlich geschieht dies nur aus Gründen der Benutzererfahrung. Ein sehr häufiges Szenario besteht darin, dass Benutzer nach Produkten über Schlüsselwörter suchen Wenn der Benutzer zu diesem Zeitpunkt schließlich zur zweiten Seite scrollt und das Produkt findet, das er sehen möchte, wird er zur Produktdetailseite weitergeleitet. und dann ein Backup... Der Benutzer ist verwirrt.

Angular Routing und Komponenten bilden von Anfang an eine Beziehung über RouterModule.forRoot. Wenn die Route erreicht wird, wird ComponentFactoryResolver zum Erstellen der Komponente verwendet.

Jede Route ist nicht unbedingt ein einmaliger Verbrauch, um den Routing-Status zu durchlaufen und zu entscheiden, wie Komponenten erstellt werden. Wie eingangs erwähnt, ist dies nicht der Fall verarbeitet.

RouteReuseStrategy ist seit 2 Jahren experimentell und ist es auch jetzt noch. Es sollte so lange vertrauenswürdig sein.

2. RouteReuseStrategy

RouteReuseStrategy Ich nenne es: Routenwiederverwendungsstrategie; es ist nicht kompliziert und bietet mehrere leicht verständliche Methoden:

• shouldDetach Ob die Wiederverwendung der Route zugelassen werden soll

• Speichern wird ausgelöst, wenn die Route verlässt, speichern Sie die Route

• shouldAttach Ob um die Wiederherstellung der Route zu ermöglichen

• Abrufen Gespeicherte Route abrufen

• shouldReuseRoute Route eingeben Auslöser, ob dieselbe Route wiederverwendet werden soll

Das sieht aus wie eine Zeitachsenbeziehung, im Volksmund sieht es so aus: Legen Sie die Route/Liste so fest, dass sie wiederverwendet werden kann (shouldDetach), und speichern Sie dann den Routen-Snapshot im Speicher, wenn ShouldReuseRoute eingerichtet ist. Das heißt: nach der Begegnung Die /list-Route bedeutet, dass die Route wiederverwendet werden muss. Bestimmen Sie zunächst, ob ShouldAttach eine Wiederherstellung zulässt, und rufen Sie schließlich den Routing-Snapshot ab, um die Komponente abzurufen und zu erstellen.

Wenn wir dieses Prinzip verstehen und das von der Suchliste am Anfang zurückgegebene Problem nehmen, ist es sehr einfach zu lösen.

3. Ein Beispiel

Wie oben erläutert, müssen Sie nur die RouteReuseStrategy-Schnittstelle implementieren, um eine Routennutzungsstrategie anzupassen.

1. Erstellen Sie eine Strategie

import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router';

export class SimpleReuseStrategy implements RouteReuseStrategy {

  _cacheRouters: { [key: string]: any } = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this._cacheRouters[route.routeConfig.path] = {
      snapshot: route,
      handle: handle
    };
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this._cacheRouters[route.routeConfig.path];
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this._cacheRouters[route.routeConfig.path].handle;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

Definieren Sie einen _cacheRouters zum Zwischenspeichern von Daten (Routing-Snapshot und aktuelles Komponenteninstanzobjekt).

• shouldDetach gibt direkt true zurück, was angibt, dass die Wiederverwendung für alle Routen zulässig ist.

• Store wird ausgelöst, wenn die Route verlässt. Verwenden Sie den Pfad als Schlüssel zum Speichern des Routing-Snapshots und des aktuellen Instanzobjekts. Dies entspricht der Konfiguration in RouterModule.forRoot.

• shouldAttach Wenn der Pfad im Cache vorhanden ist, wird davon ausgegangen, dass die Route wiederhergestellt werden darf.

• retrieve Holen Sie sich den Snapshot vom Cache, wenn nicht, null zurückgeben

• shouldReuseRoute gibt den Routentrigger ein und bestimmt, ob es sich um dieselbe Route handelt

Registrieren

Registrieren Sie abschließend die Richtlinie im Modul. Darunter:

providers: [
 { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy }
]

Angenommen, wir haben eine solche Routing-Konfiguration:

RouterModule.forRoot([
 { path: 'search', component: SearchComponent },
 { path: 'edit/:id', component: EditComponent }
])

Die Suchkomponente wird für Suchaktionen verwendet und springt basierend auf den Suchergebnissen zur Bearbeitungsseite und kehrt nach dem Speichern zum Status der endgültigen Suchergebnisse zurück (ich werde diesen Teil des Codes nicht veröffentlichen, ich bin daran interessiert, plnkr zu sehen).

4. Fazit

Das Obige ist nur eine einfache Einführung. Tatsächlich wird die Beurteilung der Wiederverwendung komplizierter sein, z. B. die Position der Bildlaufleiste, die Cache-Bereinigung usw.

Eine sinnvolle Nutzung dieses Routing-Wiederverwendungsstrategiemechanismus kann viele Probleme bei der Web-Erfahrung lösen.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Angular2-Routing-Vorladeinstanz

Das obige ist der detaillierte Inhalt vonImplementierungsstrategie für die Wiederverwendung von Winkelrouten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!