So verwenden Sie Strategien beim Angular-Routing wieder

1. Einführung

Das Routing erfolgt zustandslos für Komponenten, das heißt, der Komponentenstatus wird natürlich auch gelöscht, wenn die Route beendet wird.

Aber manchmal können einige besondere 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 anhand von Schlüsselwörtern 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.

Winkelführung und Komponenten bilden von Anfang an eine Beziehung durch RouterModule.forRoot. Wenn die Route erreicht ist, verwenden Sie ComponentFactoryResolver, um die Komponente zu erstellen.

Und jede Route ist nicht unbedingt ein einmaliger Verbrauch. RouteReuseStrategy um den Routing-Status zu durchlaufen und zu entscheiden, wie Komponenten erstellt werden, wie eingangs erwähnt , nichts ist erledigt.

RouteReuseStrategy Es ist seit 2 experimentell und ist immer noch so. Es sollte nach so langer Zeit vertrauenswürdig sein.

2. RouteReuseStrategy

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

• shouldDetachOb die Routenwiederverwendung zugelassen werden soll

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

• shouldAttach Ob die Routenwiederherstellung zugelassen werden soll

• retrieve Gespeicherte Route abrufen

• shouldReuseRoute Bei Eingabe des Routenauslösers, ob dies der Fall ist die gleiche Route Route erneut verwenden

Dies sieht aus wie eine Zeitachsenbeziehung, im Volksmund sieht es so aus: Route festlegen /list, um Wiederverwendung zu ermöglichen (shouldDetach), Dann den Routing-Snapshot speichern in store; wenn shouldReuseRoute eingerichtet ist: Wenn Sie erneut auf die Route /list stoßen, wird die Notwendigkeit angezeigt, die Route erneut zu verwenden. Stellen Sie zunächst fest, ob shouldAttach eine Wiederherstellung zulässt, und rufen Sie schließlich den Routing-Snapshot von retrieve ab Komponenten bauen.

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 Routing-Nutzungsstrategie 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 ein _cacheRouters für das Zwischenspeichern von Daten (Routing-Snapshot und aktuelles Komponenteninstanzobjekt).

• shouldDetach Direkt zurückkehren true, um anzugeben, dass alle Routen wiederverwendet werden dürfen

• store wird ausgelöst, wenn a Route geht. 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 path als zulässig erachtet wird, die Route im Cache wiederherzustellen, erhält

• retrieve den Snapshot aus dem Cache, wenn nicht, null zurückgeben

• shouldReuseRoute Geben Sie den Routing-Trigger ein, um festzustellen, ob es sich um dieselbe Route handelt

2. Registrieren

Registrieren Sie abschließend die Strategie im Modul:

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 und verwendet Springt basierend auf den Suchergebnissen zur Bearbeitungsseite und kehrt nach dem Speichern zum Status des letzten Suchergebnisses 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, aber tatsächlich wird die Beurteilung der Wiederverwendung komplizierter sein, wie 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.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Strategien beim Angular-Routing wieder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!